@font-face{font-family:'RSBold';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/RuneScape-Bold-12.otf) format('opentype');}
  @font-face{font-family:'RSPlain';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/RuneScape-Plain-12.otf) format('opentype');}
  @font-face{font-family:'RSSmall';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/RuneScape-Plain-11.otf) format('opentype');}

  :root {
    --stone:     #3E3529;
    --stone-hi:  #675A46;
    --stone-lo:  #1F1A13;
    --stage-a:   #171106;
    --stage-b:   #0B0803;
    --parch:     #C6B99B;
    --parch-hi:  #DACBA9;
    --parch-lo:  #94886C;
    --orange:    #FF981F;
    --yellow:    #FFFF00;
    --white:     #FFFFFF;
    --black:     #000000;
    --menu:      #5D5447;
    --menu-hi:   #7F7361;
    --chat-blue: #0B2E86;
    --slot-lo:   #2A241B;

    --bold:  "RSBold", ui-monospace, monospace;
    --plain: "RSPlain", ui-monospace, monospace;
    --small: "RSSmall", ui-monospace, monospace;

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }

  body {
    margin: 0;
    min-height: 100dvh;
    padding: clamp(0.5rem, 2.5vw, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #13100A;
    background-image: var(--grain);
    background-blend-mode: overlay;
    color: var(--white);
    font-family: var(--plain);
    overflow: auto;
  }

  .game {
    width: 100%;
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: var(--stone);
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    outline: 2px solid var(--black);
  }

  .titlebar {
    margin: 0;
    text-align: center;
    font-family: var(--bold);
    font-weight: 400;
    font-size: 60px;
    line-height: 1.1;
    color: var(--orange);
    text-shadow: 3px 3px 0 var(--black);
    padding: 4px 0 8px;
    border-bottom: 2px solid var(--stone-lo);
  }

  .stage {
    position: relative;
    background: radial-gradient(120% 100% at 50% 42%, #1C1408 0%, var(--stage-a) 52%, var(--stage-b) 100%);
    border: 2px solid;
    border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
  }
  .stage.dragging { cursor: grabbing; }

  #herb {
    display: block;
    width: min(100%, 480px);
    height: auto;
    image-rendering: pixelated;
  }
  #herb:focus-visible { outline: 2px dashed var(--yellow); outline-offset: -6px; }

  .action {
    position: absolute;
    top: 8px;
    left: 8px;
    margin: 0;
    font-family: var(--bold);
    font-size: 24px;
    line-height: 1.15;
    text-shadow: 2px 2px 0 var(--black);
    pointer-events: none;
    opacity: 0;
    transition: opacity 80ms linear;
    max-width: calc(100% - 104px);
  }
  .action.on { opacity: 1; }
  .action .verb { color: var(--white); }
  .action .obj  { color: var(--orange); }

  .hint {
    position: absolute;
    bottom: 6px;
    right: 8px;
    margin: 0;
    font-family: var(--small);
    font-size: 20px;
    color: #8E8267;
    text-shadow: 2px 2px 0 var(--black);
    pointer-events: none;
  }

  .reset {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
    padding: 3px 10px 5px;
    font-family: var(--bold);
    font-size: 20px;
    line-height: 1;
    color: var(--orange);
    text-shadow: 2px 2px 0 var(--black);
    background: #4A4034;
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    outline: 1px solid var(--black);
    cursor: pointer;
  }
  .reset:hover { background-color: #594C3D; }
  .reset:active { border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo); }
  .reset:focus-visible { outline: 2px solid var(--yellow); }

  /* Sits in the page's own corner, opposite the inventory tab. It carries the
     same stone plate so it stays readable wherever the page scrolls it over. */
  .credit {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 10;
    margin: 0;
    padding: 4px 10px 6px;
    font-family: var(--small);
    font-size: 20px;
    line-height: 1;
    color: #B3A78C;
    text-shadow: 2px 2px 0 var(--black);
    background: #4A4034;
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    outline: 1px solid var(--black);
    pointer-events: none;
  }
  .credit b { font-weight: 400; color: var(--orange); }

  /* ---- inventory tab, drawn like the game's ---- */
  .tab {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 42px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #4A4034;
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    outline: 1px solid var(--black);
    cursor: pointer;
    z-index: 10;
  }
  .tab:hover { background-color: #594C3D; }
  .tab[aria-expanded="true"] {
    background-color: #6A5B47;
    border-color: var(--stone-lo) var(--stone-hi) var(--stone-hi) var(--stone-lo);
  }
  .tab:focus-visible { outline: 2px solid var(--yellow); }
  .tab img { display: block; width: 25px; height: 27px; image-rendering: pixelated; }

  /* ---- inventory ---- */
  .inv {
    position: fixed;
    right: 10px;
    bottom: 54px;
    z-index: 9;
    padding: 5px;
    background: #3A3125;
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    outline: 1px solid var(--black);
    display: grid;
    grid-template-columns: repeat(4, 46px);
    grid-auto-rows: 40px;
    gap: 1px;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .inv[hidden] { display: none; }

  .slot {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    position: relative;
    cursor: default;
  }
  .slot.filled { cursor: pointer; }
  .slot canvas { display: block; image-rendering: pixelated; pointer-events: none; }
  .slot.filled:hover::after {
    content: "";
    position: absolute;
    inset: 2px;
    outline: 1px solid rgba(255, 255, 255, 0.28);
  }
  .slot:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }

  /* ---- chatbox ---- */
  .chatbox {
    background: var(--parch);
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--parch-lo) var(--parch-hi) var(--parch-hi) var(--parch-lo);
    padding: 6px 10px 8px;
    height: 132px;
    overflow: hidden;
  }
  .chat {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; justify-content: flex-end;
    height: 100%; gap: 2px;
  }
  .chat li {
    font-family: var(--plain);
    font-size: 24px;
    line-height: 1.15;
    color: var(--black);
    animation: line-in 120ms steps(2) both;
  }
  .chat li.sys { color: var(--chat-blue); }
  .chat li.dim { color: #5A5142; }

  @keyframes line-in { from { opacity: 0; } to { opacity: 1; } }

  /* ---- right-click menu ---- */
  .menu {
    position: fixed;
    z-index: 20;
    min-width: 230px;
    background: var(--menu);
    border: 1px solid var(--black);
    display: none;
    user-select: none;
  }
  .menu.on { display: block; }
  .menu-head {
    padding: 3px 6px 4px;
    font-family: var(--bold);
    font-size: 22px;
    color: var(--white);
    text-shadow: 2px 2px 0 var(--black);
    border-bottom: 1px solid var(--black);
  }
  .menu ul { margin: 0; padding: 2px 0 3px; list-style: none; }
  .menu li {
    padding: 1px 6px;
    font-family: var(--plain);
    font-size: 22px;
    color: var(--white);
    text-shadow: 2px 2px 0 var(--black);
    cursor: pointer;
    white-space: nowrap;
  }
  .menu li:hover, .menu li:focus-visible { background: var(--menu-hi); outline: none; }
  .menu li .obj { color: var(--orange); }

  @media (max-height: 760px) {
    #herb { width: min(100%, 380px); }
    .chatbox { height: 108px; }
    .inv { grid-template-columns: repeat(4, 38px); grid-auto-rows: 33px; bottom: 50px; }
    .slot canvas { width: 33px; height: 30px; }
  }

  @media (max-width: 560px) {
    .titlebar { font-size: 36px; text-shadow: 2px 2px 0 var(--black); }
    .chat li { font-size: 18px; }
    .action { font-size: 18px; max-width: calc(100% - 86px); }
    .reset { font-size: 16px; padding: 3px 8px 4px; }
    .credit { font-size: 16px; left: 6px; bottom: 6px; padding: 3px 8px 5px; }
    .menu-head, .menu li { font-size: 18px; }
    .hint { display: none; }
    .chatbox { height: 96px; }
    .inv { grid-template-columns: repeat(4, 34px); grid-auto-rows: 28px; bottom: 46px; right: 6px; }
    .slot canvas { width: 30px; height: 27px; }
    .tab { width: 36px; height: 32px; right: 6px; bottom: 6px; }
  }

  @media (prefers-reduced-motion: reduce) { .chat li { animation: none; } }

  /* ---- 404 ---- */
  .notfound {
    max-width: 520px;
    padding: 18px 20px 22px;
    text-align: center;
    background: var(--stone);
    background-image: var(--grain);
    background-blend-mode: soft-light;
    border: 2px solid;
    border-color: var(--stone-hi) var(--stone-lo) var(--stone-lo) var(--stone-hi);
    outline: 2px solid var(--black);
  }
  .notfound h1 {
    margin: 0 0 6px;
    font-family: var(--bold);
    font-weight: 400;
    font-size: 44px;
    line-height: 1.1;
    color: var(--orange);
    text-shadow: 3px 3px 0 var(--black);
  }
  .notfound p { margin: 0 0 14px; font-size: 22px; color: #C6B99B; text-shadow: 2px 2px 0 var(--black); }
  .notfound a { color: var(--orange); text-decoration: none; border-bottom: 1px solid currentColor; font-size: 22px; }
  .notfound a:hover { color: var(--yellow); }