/* Loamrift UI: the 2D survival-sandbox standard, played straight.
   Every panel is one translucent blue slab with a black rim; whatever you point at or have chosen turns gold.
   Text over the world is white with a black outline. Life is hearts, mana is stars, breath is bubbles.
   The pixel icons below are drawn in code (11 to 14 cell grids) and scale by whole pixels. */
:root{
  color-scheme:dark;height:100%;box-sizing:border-box;
  --panel:rgba(63,82,151,.72);
  --panel-text:rgba(52,68,134,.92);
  --panel-hi:rgb(73,94,171);
  --panel-lo:rgba(28,38,84,.78);
  --slot:rgba(46,62,128,.8);
  --slot-hi:rgba(66,88,170,.88);
  --field:rgba(14,20,50,.88);
  --bevel-hi:rgba(150,172,255,.26);
  --bevel-lo:rgba(4,8,30,.4);
  --gold:#ffe745;
  --ink:#fff;
  --ink-2:#cad3ff;
  --ink-3:#97a2d6;
  --ok:#8fe86a;
  --bad:#ff9d9d;
  --life:#e8323c;
  --food:#f2a03c;
  --xp:#9be25a;
  --magic:#d2a0ff;
  --font:"DotGothic16","Pixelify Sans",system-ui,sans-serif;
  --o1:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
  --o2:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000,2px 1px 0 #000,-2px 1px 0 #000,2px -1px 0 #000,-2px -1px 0 #000,1px 2px 0 #000,-1px 2px 0 #000,1px -2px 0 #000,-1px -2px 0 #000;
  --o3:3px 0 0 #000,-3px 0 0 #000,0 3px 0 #000,0 -3px 0 #000,3px 3px 0 #000,-3px 3px 0 #000,3px -3px 0 #000,-3px -3px 0 #000,3px 1px 0 #000,-3px 1px 0 #000,3px -1px 0 #000,-3px -1px 0 #000,1px 3px 0 #000,-1px 3px 0 #000,1px -3px 0 #000,-1px -3px 0 #000,3px 2px 0 #000,-3px 2px 0 #000,3px -2px 0 #000,-3px -2px 0 #000,2px 3px 0 #000,-2px 3px 0 #000,2px -3px 0 #000,-2px -3px 0 #000;
  --slot-size:48px;
  --hud-x:calc(16px + env(safe-area-inset-left,0px));
  --hud-r:calc(16px + env(safe-area-inset-right,0px));
  --hud-y:calc(10px + env(safe-area-inset-top,0px));
  --px-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h5v1h-5zM7 0h5v1h-5zM0 1h2v1h-2zM5 1h3v1h-3zM11 1h2v1h-2zM0 2h1v1h-1zM6 2h1v1h-1zM12 2h1v1h-1zM0 3h1v1h-1zM12 3h1v1h-1zM0 4h1v1h-1zM12 4h1v1h-1zM0 5h1v1h-1zM12 5h1v1h-1zM0 6h2v1h-2zM11 6h2v1h-2zM1 7h2v1h-2zM10 7h2v1h-2zM2 8h2v1h-2zM9 8h2v1h-2zM3 9h2v1h-2zM8 9h2v1h-2zM4 10h2v1h-2zM7 10h2v1h-2zM5 11h3v1h-3z'/%3E%3Cpath fill='%23e8323c' d='M2 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM7 2h4v1h-4zM1 3h1v1h-1zM3 3h8v1h-8zM1 4h10v1h-10zM2 5h8v1h-8zM3 6h6v1h-6zM4 7h4v1h-4zM5 8h2v1h-2z'/%3E%3Cpath fill='%239e1228' d='M4 1h1v1h-1zM10 1h1v1h-1zM5 2h1v1h-1zM11 2h1v1h-1zM11 3h1v1h-1zM11 4h1v1h-1zM1 5h1v1h-1zM10 5h2v1h-2zM2 6h1v1h-1zM9 6h2v1h-2zM3 7h1v1h-1zM8 7h2v1h-2zM4 8h1v1h-1zM7 8h2v1h-2zM5 9h3v1h-3zM6 10h1v1h-1z'/%3E%3Cpath fill='%23ffe3e5' d='M2 2h1v1h-1z'/%3E%3Cpath fill='%23ff9aa2' d='M3 2h2v1h-2zM2 3h1v1h-1z'/%3E%3C/svg%3E");
  --px-heartEmpty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h5v1h-5zM7 0h5v1h-5zM0 1h2v1h-2zM5 1h3v1h-3zM11 1h2v1h-2zM0 2h1v1h-1zM6 2h1v1h-1zM12 2h1v1h-1zM0 3h1v1h-1zM12 3h1v1h-1zM0 4h1v1h-1zM12 4h1v1h-1zM0 5h1v1h-1zM12 5h1v1h-1zM0 6h2v1h-2zM11 6h2v1h-2zM1 7h2v1h-2zM10 7h2v1h-2zM2 8h2v1h-2zM9 8h2v1h-2zM3 9h2v1h-2zM8 9h2v1h-2zM4 10h2v1h-2zM7 10h2v1h-2zM5 11h3v1h-3z'/%3E%3Cpath fill='rgba(40%2C14%2C30%2C.62)' d='M2 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM7 2h4v1h-4zM1 3h1v1h-1zM3 3h8v1h-8zM1 4h10v1h-10zM2 5h8v1h-8zM3 6h6v1h-6zM4 7h4v1h-4zM5 8h2v1h-2z'/%3E%3Cpath fill='rgba(24%2C8%2C20%2C.62)' d='M4 1h1v1h-1zM10 1h1v1h-1zM5 2h1v1h-1zM11 2h1v1h-1zM11 3h1v1h-1zM11 4h1v1h-1zM1 5h1v1h-1zM10 5h2v1h-2zM2 6h1v1h-1zM9 6h2v1h-2zM3 7h1v1h-1zM8 7h2v1h-2zM4 8h1v1h-1zM7 8h2v1h-2zM5 9h3v1h-3zM6 10h1v1h-1z'/%3E%3Cpath fill='rgba(90%2C40%2C60%2C.62)' d='M2 2h1v1h-1zM3 2h2v1h-2zM2 3h1v1h-1z'/%3E%3C/svg%3E");
  --px-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h3v1h-3zM4 1h2v1h-2zM7 1h2v1h-2zM4 2h1v1h-1zM8 2h1v1h-1zM0 3h5v1h-5zM8 3h5v1h-5zM0 4h1v1h-1zM12 4h1v1h-1zM0 5h2v1h-2zM11 5h2v1h-2zM1 6h2v1h-2zM10 6h2v1h-2zM1 7h2v1h-2zM10 7h2v1h-2zM1 8h1v1h-1zM6 8h1v1h-1zM11 8h1v1h-1zM0 9h2v1h-2zM5 9h3v1h-3zM11 9h2v1h-2zM0 10h1v1h-1zM3 10h3v1h-3zM7 10h3v1h-3zM12 10h1v1h-1zM0 11h4v1h-4zM9 11h4v1h-4z'/%3E%3Cpath fill='%232238b8' d='M6 1h1v1h-1zM7 2h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM10 4h2v1h-2zM2 5h1v1h-1zM9 5h2v1h-2zM9 6h1v1h-1zM5 7h2v1h-2zM9 7h1v1h-1zM4 8h2v1h-2zM7 8h1v1h-1zM10 8h1v1h-1zM2 9h3v1h-3zM8 9h3v1h-3zM1 10h2v1h-2zM10 10h2v1h-2z'/%3E%3Cpath fill='%234a78ff' d='M5 2h1v1h-1zM5 3h1v1h-1zM2 4h2v1h-2zM6 4h4v1h-4zM3 5h6v1h-6zM3 6h6v1h-6zM3 7h2v1h-2zM7 7h2v1h-2zM2 8h2v1h-2zM8 8h2v1h-2z'/%3E%3Cpath fill='%23ffffff' d='M6 2h1v1h-1z'/%3E%3Cpath fill='%23b8ccff' d='M6 3h1v1h-1zM4 4h2v1h-2z'/%3E%3C/svg%3E");
  --px-starEmpty:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h3v1h-3zM4 1h2v1h-2zM7 1h2v1h-2zM4 2h1v1h-1zM8 2h1v1h-1zM0 3h5v1h-5zM8 3h5v1h-5zM0 4h1v1h-1zM12 4h1v1h-1zM0 5h2v1h-2zM11 5h2v1h-2zM1 6h2v1h-2zM10 6h2v1h-2zM1 7h2v1h-2zM10 7h2v1h-2zM1 8h1v1h-1zM6 8h1v1h-1zM11 8h1v1h-1zM0 9h2v1h-2zM5 9h3v1h-3zM11 9h2v1h-2zM0 10h1v1h-1zM3 10h3v1h-3zM7 10h3v1h-3zM12 10h1v1h-1zM0 11h4v1h-4zM9 11h4v1h-4z'/%3E%3Cpath fill='rgba(12%2C16%2C48%2C.62)' d='M6 1h1v1h-1zM7 2h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM10 4h2v1h-2zM2 5h1v1h-1zM9 5h2v1h-2zM9 6h1v1h-1zM5 7h2v1h-2zM9 7h1v1h-1zM4 8h2v1h-2zM7 8h1v1h-1zM10 8h1v1h-1zM2 9h3v1h-3zM8 9h3v1h-3zM1 10h2v1h-2zM10 10h2v1h-2z'/%3E%3Cpath fill='rgba(20%2C26%2C70%2C.62)' d='M5 2h1v1h-1zM5 3h1v1h-1zM2 4h2v1h-2zM6 4h4v1h-4zM3 5h6v1h-6zM3 6h6v1h-6zM3 7h2v1h-2zM7 7h2v1h-2zM2 8h2v1h-2zM8 8h2v1h-2z'/%3E%3Cpath fill='rgba(50%2C60%2C120%2C.62)' d='M6 2h1v1h-1zM6 3h1v1h-1zM4 4h2v1h-2z'/%3E%3C/svg%3E");
  --px-bubble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' shape-rendering='crispEdges'%3E%3Cpath fill='%230b1a3a' d='M2 0h7v1h-7zM1 1h2v1h-2zM8 1h2v1h-2zM0 2h2v1h-2zM9 2h2v1h-2zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM10 7h1v1h-1zM0 8h2v1h-2zM9 8h2v1h-2zM1 9h2v1h-2zM8 9h2v1h-2zM2 10h7v1h-7z'/%3E%3Cpath fill='%238fd0ff' d='M3 1h5v1h-5zM2 2h1v1h-1zM8 2h1v1h-1zM1 3h1v1h-1zM9 3h1v1h-1zM1 4h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM9 5h1v1h-1zM1 6h1v1h-1zM9 6h1v1h-1zM1 7h1v1h-1zM9 7h1v1h-1zM2 8h1v1h-1zM8 8h1v1h-1zM3 9h5v1h-5z'/%3E%3Cpath fill='rgba(140%2C205%2C255%2C.35)' d='M3 2h5v1h-5zM2 3h1v1h-1zM5 3h4v1h-4zM2 4h1v1h-1zM4 4h5v1h-5zM2 5h7v1h-7zM2 6h7v1h-7zM2 7h7v1h-7zM3 8h5v1h-5z'/%3E%3Cpath fill='%23ffffff' d='M3 3h1v1h-1z'/%3E%3Cpath fill='%23e8f6ff' d='M4 3h1v1h-1zM3 4h1v1h-1z'/%3E%3C/svg%3E");
  --px-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h11v1h-11zM0 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM10 5h1v1h-1zM0 6h2v1h-2zM9 6h2v1h-2zM1 7h1v1h-1zM9 7h1v1h-1zM1 8h2v1h-2zM8 8h2v1h-2zM2 9h2v1h-2zM7 9h2v1h-2zM3 10h2v1h-2zM6 10h2v1h-2zM4 11h3v1h-3z'/%3E%3Cpath fill='%23c9ced8' d='M1 1h8v1h-8zM1 2h1v1h-1zM4 2h5v1h-5zM1 3h1v1h-1zM3 3h6v1h-6zM1 4h8v1h-8zM2 5h6v1h-6zM2 6h6v1h-6zM3 7h4v1h-4zM4 8h2v1h-2z'/%3E%3Cpath fill='%237f8796' d='M9 1h1v1h-1zM9 2h1v1h-1zM9 3h1v1h-1zM9 4h1v1h-1zM1 5h1v1h-1zM8 5h2v1h-2zM8 6h1v1h-1zM2 7h1v1h-1zM7 7h2v1h-2zM3 8h1v1h-1zM6 8h2v1h-2zM4 9h3v1h-3zM5 10h1v1h-1z'/%3E%3Cpath fill='%23ffffff' d='M2 2h1v1h-1zM3 2h1v1h-1zM2 3h1v1h-1z'/%3E%3C/svg%3E");
  --px-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM2 1h2v1h-2zM5 1h1v1h-1zM1 2h2v1h-2zM5 2h1v1h-1zM0 3h2v1h-2zM5 3h1v1h-1zM0 4h1v1h-1zM5 4h1v1h-1zM0 5h2v1h-2zM5 5h1v1h-1zM1 6h2v1h-2zM5 6h1v1h-1zM2 7h2v1h-2zM5 7h1v1h-1zM3 8h3v1h-3z'/%3E%3Cpath fill='%23ffffff' d='M4 1h1v1h-1zM3 2h2v1h-2zM2 3h3v1h-3zM1 4h4v1h-4zM2 5h3v1h-3zM3 6h2v1h-2zM4 7h1v1h-1z'/%3E%3C/svg%3E");
  --px-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M4 0h6v1h-6zM3 1h1v1h-1zM10 1h1v1h-1zM4 2h2v1h-2zM8 2h2v1h-2zM4 3h1v1h-1zM9 3h1v1h-1zM3 4h1v1h-1zM10 4h1v1h-1zM2 5h1v1h-1zM11 5h1v1h-1zM1 6h1v1h-1zM12 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM0 10h1v1h-1zM13 10h1v1h-1zM1 11h1v1h-1zM12 11h1v1h-1zM2 12h1v1h-1zM11 12h1v1h-1zM3 13h8v1h-8z'/%3E%3Cpath fill='%23ffe745' d='M4 1h6v1h-6zM6 2h2v1h-2z'/%3E%3Cpath fill='%23b0763c' d='M5 3h4v1h-4zM4 4h1v1h-1zM6 4h4v1h-4zM3 5h1v1h-1zM5 5h6v1h-6zM2 6h1v1h-1zM4 6h7v1h-7zM1 7h1v1h-1zM3 7h9v1h-9zM1 8h11v1h-11zM1 9h10v1h-10zM1 10h10v1h-10zM3 11h7v1h-7z'/%3E%3Cpath fill='%23e0a868' d='M5 4h1v1h-1zM4 5h1v1h-1zM3 6h1v1h-1zM2 7h1v1h-1z'/%3E%3Cpath fill='%237a4a22' d='M11 6h1v1h-1zM12 7h1v1h-1zM12 8h1v1h-1zM11 9h2v1h-2zM11 10h2v1h-2zM2 11h1v1h-1zM10 11h2v1h-2zM3 12h8v1h-8z'/%3E%3C/svg%3E"); /* 14x14 */
  --px-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h14v1h-14zM0 1h1v1h-1zM13 1h1v1h-1zM0 2h1v1h-1zM13 2h1v1h-1zM0 3h1v1h-1zM13 3h1v1h-1zM0 4h1v1h-1zM13 4h1v1h-1zM0 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM13 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM0 10h14v1h-14z'/%3E%3Cpath fill='%23ecd9a6' d='M1 1h4v1h-4zM9 1h4v1h-4zM1 2h1v1h-1zM4 2h1v1h-1zM9 2h4v1h-4zM1 3h2v1h-2zM4 3h1v1h-1zM9 3h1v1h-1zM11 3h1v1h-1zM1 4h3v1h-3zM9 4h2v1h-2zM12 4h1v1h-1zM1 5h4v1h-4zM9 5h1v1h-1zM11 5h1v1h-1zM1 6h4v1h-4zM9 6h4v1h-4zM1 7h4v1h-4zM10 7h3v1h-3zM1 8h4v1h-4zM9 8h1v1h-1zM12 8h1v1h-1zM1 9h4v1h-4zM9 9h4v1h-4z'/%3E%3Cpath fill='%23cbb27c' d='M5 1h4v1h-4zM5 2h4v1h-4zM5 3h4v1h-4zM6 4h3v1h-3zM5 5h1v1h-1zM7 5h2v1h-2zM5 6h2v1h-2zM5 7h4v1h-4zM5 8h4v1h-4zM5 9h4v1h-4z'/%3E%3Cpath fill='%237a4a22' d='M2 2h2v1h-2zM3 3h1v1h-1zM4 4h2v1h-2zM6 5h1v1h-1zM7 6h2v1h-2zM9 7h1v1h-1zM10 8h2v1h-2z'/%3E%3Cpath fill='%23e8323c' d='M10 3h1v1h-1zM12 3h1v1h-1zM11 4h1v1h-1zM10 5h1v1h-1zM12 5h1v1h-1z'/%3E%3C/svg%3E"); /* 14x11 */
  --px-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h12v1h-12zM1 1h1v1h-1zM12 1h1v1h-1zM1 2h1v1h-1zM12 2h1v1h-1zM1 3h1v1h-1zM12 3h1v1h-1zM1 4h1v1h-1zM12 4h1v1h-1zM1 5h1v1h-1zM12 5h1v1h-1zM1 6h1v1h-1zM12 6h1v1h-1zM1 7h1v1h-1zM12 7h1v1h-1zM1 8h1v1h-1zM12 8h1v1h-1zM1 9h1v1h-1zM12 9h1v1h-1zM1 10h12v1h-12z'/%3E%3Cpath fill='%2325603c' d='M2 1h1v1h-1zM2 2h1v1h-1zM2 3h1v1h-1zM2 4h1v1h-1zM2 5h1v1h-1zM2 6h1v1h-1zM2 7h1v1h-1zM2 8h1v1h-1zM2 9h1v1h-1z'/%3E%3Cpath fill='%233f9a63' d='M3 1h9v1h-9zM3 2h9v1h-9zM3 3h1v1h-1zM11 3h1v1h-1zM3 4h9v1h-9zM3 5h2v1h-2zM10 5h2v1h-2zM3 6h9v1h-9zM3 7h9v1h-9zM3 8h9v1h-9z'/%3E%3Cpath fill='%23ffe745' d='M4 3h7v1h-7zM5 5h5v1h-5z'/%3E%3Cpath fill='%23f4ecd4' d='M3 9h9v1h-9z'/%3E%3C/svg%3E"); /* 14x11 */
  --px-cog:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M5 0h3v1h-3zM2 1h2v1h-2zM5 1h1v1h-1zM7 1h1v1h-1zM9 1h2v1h-2zM1 2h1v1h-1zM3 2h3v1h-3zM7 2h3v1h-3zM11 2h1v1h-1zM1 3h2v1h-2zM10 3h2v1h-2zM2 4h1v1h-1zM5 4h3v1h-3zM10 4h1v1h-1zM0 5h3v1h-3zM4 5h1v1h-1zM8 5h1v1h-1zM10 5h3v1h-3zM0 6h1v1h-1zM4 6h1v1h-1zM8 6h1v1h-1zM12 6h1v1h-1zM0 7h3v1h-3zM4 7h1v1h-1zM8 7h1v1h-1zM10 7h3v1h-3zM2 8h1v1h-1zM5 8h3v1h-3zM10 8h1v1h-1zM1 9h2v1h-2zM11 9h1v1h-1zM1 10h1v1h-1zM3 10h3v1h-3zM7 10h3v1h-3zM11 10h1v1h-1zM2 11h2v1h-2zM5 11h1v1h-1zM7 11h1v1h-1zM9 11h2v1h-2zM5 12h3v1h-3z'/%3E%3Cpath fill='%23ffffff' d='M6 1h1v1h-1zM2 2h1v1h-1zM1 6h1v1h-1z'/%3E%3Cpath fill='%23d6dae6' d='M6 2h1v1h-1zM10 2h1v1h-1zM3 3h7v1h-7zM3 4h2v1h-2zM8 4h2v1h-2zM3 5h1v1h-1zM2 6h2v1h-2zM11 6h1v1h-1zM3 7h1v1h-1zM3 8h2v1h-2zM3 9h2v1h-2zM2 10h1v1h-1z'/%3E%3Cpath fill='%238a90a8' d='M9 5h1v1h-1zM9 6h2v1h-2zM9 7h1v1h-1zM8 8h2v1h-2zM5 9h6v1h-6zM6 10h1v1h-1zM10 10h1v1h-1zM6 11h1v1h-1z'/%3E%3C/svg%3E"); /* 13x13 */
}
body{height:100%;margin:0;background:#05070f;color:var(--ink);font:400 16px/1.35 var(--font);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{position:relative;width:100%;height:100%;overflow:hidden}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
[hidden]{display:none!important}
button{font:inherit;font-weight:500;color:var(--ink);cursor:pointer}
button:disabled{cursor:not-allowed}
input::placeholder{color:var(--ink-3);opacity:1;text-shadow:none}
::selection{background:var(--gold);color:#000;text-shadow:none}
input{caret-color:var(--gold)}
:is(button,input,select,summary):focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
*{scrollbar-width:thin;scrollbar-color:#6f84d6 rgba(6,10,32,.5)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(6,10,32,.5);border-radius:6px}
::-webkit-scrollbar-thumb{background:#6f84d6;border:2px solid #000;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* text that sits on the world: white, outlined */
.label{font-size:18px;line-height:1.25;color:var(--ink);text-shadow:var(--o2);white-space:nowrap}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
/* top left: the held item's name, the hotbar, experience, buffs */
.hudL{position:absolute;left:var(--hud-x);top:var(--hud-y);width:calc(8*var(--slot-size) + 28px);display:flex;flex-direction:column;gap:4px}
#heldName{height:24px;margin:0;overflow:hidden;text-overflow:ellipsis;text-align:center;line-height:24px}
#heldName.ench{color:var(--magic)}
#hotbar{display:grid;grid-template-columns:repeat(8,var(--slot-size));gap:4px;pointer-events:auto;isolation:isolate}
#xpbar{position:relative;width:50%;height:10px;margin-top:4px;box-sizing:border-box;background:rgba(0,0,0,.55);border:2px solid #000;border-radius:3px}
#xpbar i{display:block;height:100%;background:var(--xp);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
#xplvl{position:absolute;left:100%;top:50%;margin-left:8px;transform:translateY(-50%);font-size:16px;color:var(--xp);text-shadow:var(--o2)}
#buffs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.buff{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:14px;line-height:1;text-shadow:var(--o1);pointer-events:auto}
.buff img{width:32px;height:32px;padding:2px;box-sizing:border-box;image-rendering:pixelated;background:var(--panel);border:2px solid #000;border-radius:5px}
.buff.bad img{background:rgba(150,30,44,.8)}

/* top right: life, mana, the menu buttons, where you are, the minimap */
.hudR{position:absolute;right:var(--hud-r);top:var(--hud-y);display:grid;grid-template-columns:auto auto;column-gap:6px;row-gap:6px;justify-items:end;align-items:start}
.life{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.mana{grid-column:2;grid-row:1/span 5;display:flex;flex-direction:column;align-items:center;gap:2px}
.mana .label{font-size:16px}
#hptext{font-size:18px}
.hearts{display:flex;flex-wrap:wrap;max-width:242px;row-gap:2px}
.hearts i{position:relative;flex:none;width:26px;height:24px;margin-right:-2px;background:var(--px-heartEmpty) 0 0/100% 100% no-repeat}
.hearts i::after,.stars i::after{content:"";position:absolute;inset:0;background:var(--px-heart) 0 0/100% 100% no-repeat;clip-path:inset(calc((1 - var(--f,1))*100%) 0 0 0)}
.hearts i.e::after,.stars i.e::after{display:none}
.hearts.hit i{animation:beat .32s cubic-bezier(.16,1,.3,1)}
@keyframes beat{40%{transform:scale(1.18)}}
.stars{display:flex;flex-direction:column;row-gap:0}
.stars i{position:relative;flex:none;width:26px;height:24px;margin-bottom:-2px;background:var(--px-starEmpty) 0 0/100% 100% no-repeat}
.stars i::after{background-image:var(--px-star)}
.fdbar{align-self:stretch;min-width:100px;height:12px;margin:4px 2px 0 0;box-sizing:border-box;background:rgba(0,0,0,.55);border:2px solid #000;border-radius:3px}
.fdbar i{display:block;width:100%;height:100%;background:var(--food);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.fdbar.low i{background:#ff5a5a;animation:lowFood 1s steps(2) infinite}
@keyframes lowFood{50%{opacity:.45}}
.brbar{align-self:stretch;height:22px;margin-top:2px}
.brbar i{display:block;height:100%;background:var(--px-bubble) 0 0/22px 22px repeat-x}
.creative :is(.hearts,.mana,.fdbar,.brbar){display:none}
.btns{grid-column:1;display:flex;gap:4px;pointer-events:auto}
.hbtn{display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--slot);border:2px solid #000;border-radius:7px;
  box-shadow:inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo)}
.hbtn::before{content:"";width:28px;height:28px;background:var(--ico) center/contain no-repeat;image-rendering:pixelated}
.hbtn:hover{background:var(--slot-hi);border-color:var(--gold)}
.hbtn:active{transform:translateY(1px)}
#invBtn{--ico:var(--px-bag)}
#mapBtn{--ico:var(--px-map)}
#logBtn{--ico:var(--px-book)}
#menuBtn{--ico:var(--px-cog)}
/* with a keyboard the bag, map, journal and menu have keys, so their buttons only come out with the bag, as in the game this follows */
body:not(.touch) #app:not(:has(#inv:not([hidden]))) .btns{display:none}
.where{grid-column:1;display:flex;flex-direction:column;align-items:flex-end;gap:0}
.where .label{font-size:16px}
#netInfo{color:#8ff0cf}
#navHud{grid-column:1;display:flex;gap:8px;align-items:flex-start;pointer-events:auto}
#miniMap{width:192px;height:120px;image-rendering:pixelated;background:#05070f;border:3px solid #d9b347;outline:2px solid #000;border-radius:2px}
#compass{position:relative;width:44px;height:44px;border-radius:50%;background:var(--panel-lo);border:3px solid #d9b347;outline:2px solid #000}
#compass.rec{border-color:#59c3a8}
#needle{position:absolute;left:50%;top:50%;width:18px;height:4px;margin:-2px 0 0 -2px;transform-origin:2px 2px;background:linear-gradient(90deg,#fff 25%,#e8323c 25%)}

/* bottom centre: a boss or a raid */
#bossbar{position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,80vw);display:flex;flex-direction:column;align-items:center;gap:4px}
#bossbar .label{font-size:20px}
#bossbar .bb{width:100%;height:18px;box-sizing:border-box;background:rgba(0,0,0,.6);border:2px solid #000;border-radius:4px;box-shadow:0 0 0 2px #d9b347}
#bossbar i{display:block;height:100%;background:#e8323c;box-shadow:inset 0 3px 0 rgba(255,255,255,.3)}

/* ---------- slots ---------- */
.slot{position:relative;width:var(--slot-size);height:var(--slot-size);padding:0;display:grid;place-items:center;box-sizing:border-box;
  background:var(--slot);border:2px solid #000;border-radius:7px;box-shadow:inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo);
  transition:transform .08s ease-out,background-color .08s}
.slot:hover{background:var(--slot-hi);border-color:var(--gold)}
#inv .slot[data-c]{touch-action:none}
.slot img{width:32px;height:32px;image-rendering:pixelated}
.slot img.ghost{filter:grayscale(1) brightness(1.7);opacity:.26}
.slot .n{position:absolute;right:4px;bottom:1px;font-size:15px;line-height:1;color:#fff;text-shadow:var(--o1)}
.slot .k{position:absolute;left:5px;top:3px;font-size:12px;line-height:1;color:#fff;text-shadow:var(--o1)}
.touch .slot .k{display:none}
.slot .ph{font-size:11px;color:var(--ink-3)}
.slot .dur{position:absolute;left:12%;bottom:5px;height:3px;pointer-events:none;outline:1px solid #000}
.slot.sel{border-color:var(--gold);background:rgba(120,110,60,.82);box-shadow:inset 2px 2px 0 rgba(255,240,150,.35),inset -2px -2px 0 rgba(40,30,0,.35)}
#hotbar .slot.sel,#invGrid .slot.sel{transform:scale(1.1);z-index:1}
.slot.sel .k{color:var(--gold)}
.slot.glint:not(.sel){border-color:var(--magic)}
.slot.dragging{opacity:.45}
.slot.drag-over{border-color:var(--gold);background:var(--slot-hi)}
.grid .slot.pick{border-color:#fff;animation:pickPulse .9s steps(2) infinite}
@keyframes pickPulse{50%{border-color:var(--gold)}}

#toast{position:absolute;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 32px);font-size:20px;line-height:1.25;text-align:center;
  text-shadow:var(--o2);pointer-events:none;opacity:0;transition:opacity .25s}
#toast.on{opacity:1}

/* ---------- touch controls ---------- */
#touch{display:none}
.touch{--touch-edge:16px;--stick-size:136px;--slot-size:44px}
.touch #touch{display:block;position:absolute;inset:0;pointer-events:none}
#touch>*{pointer-events:auto}
.touch .hbtn{touch-action:manipulation}
.touch #hotbar .slot{touch-action:manipulation}
.tbtn{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:68px;height:68px;display:grid;place-items:center;border-radius:50%;
  background:rgba(63,82,151,.5);border:2px solid #000;box-shadow:inset 0 0 0 2px rgba(150,172,255,.35);font-size:15px;text-shadow:var(--o1);touch-action:none;-webkit-tap-highlight-color:transparent}
.tbtn.on{background:rgba(120,110,60,.7);box-shadow:inset 0 0 0 2px var(--gold);color:var(--gold)}
/* left: a stick to walk, climb and drop; right: an arc of action buttons around Jump */
#stick{position:absolute;box-sizing:border-box;left:calc(var(--touch-edge) + env(safe-area-inset-left,0px));bottom:calc(var(--touch-edge) + env(safe-area-inset-bottom,0px));width:var(--stick-size);height:var(--stick-size);
  border-radius:50%;background:rgba(14,20,50,.42);border:2px solid #000;box-shadow:inset 0 0 0 2px rgba(150,172,255,.3);touch-action:none}
#stick::before{content:'';position:absolute;inset:-10px;border-radius:50%}
#knob{position:absolute;box-sizing:border-box;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none;
  background:rgba(63,82,151,.8);border:2px solid #000;box-shadow:inset 0 0 0 2px rgba(150,172,255,.4)}
#stick.on #knob{box-shadow:inset 0 0 0 2px var(--gold)}
#stick.run #knob{background:rgba(150,130,50,.85)}
#bJ{right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:86px;height:86px;font-size:17px}
#bU{right:calc(122px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:64px;height:64px}
#bB{right:calc(112px + env(safe-area-inset-right,0px));bottom:calc(100px + env(safe-area-inset-bottom,0px));width:58px;height:58px;font-size:13px}
#bH{right:calc(34px + env(safe-area-inset-right,0px));bottom:calc(126px + env(safe-area-inset-bottom,0px));width:58px;height:58px;font-size:13px}
#bP,#bE{left:calc(var(--touch-edge) + env(safe-area-inset-left,0px));bottom:calc(var(--touch-edge) + var(--stick-size) + 18px + env(safe-area-inset-bottom,0px));width:48px;height:48px;font-size:13px}
#bE{left:calc(var(--touch-edge) + 58px + env(safe-area-inset-left,0px))}
body:not(.online) #bP,body:not(.online) #bE{display:none}
.touch #toast{bottom:calc(178px + env(safe-area-inset-bottom,0px))}
.touch #bossbar{bottom:auto;top:calc(var(--hud-y) + 96px)}
@media (max-width:600px), (max-height:480px) and (orientation:landscape){
  .touch{--touch-edge:12px;--stick-size:112px;--hud-x:calc(12px + env(safe-area-inset-left,0px));--hud-r:calc(12px + env(safe-area-inset-right,0px))}
  #bJ{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:76px;height:76px}
  #bU{right:calc(98px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:60px;height:60px}
  #bB{right:calc(98px + env(safe-area-inset-right,0px));bottom:calc(88px + env(safe-area-inset-bottom,0px));width:56px;height:56px}
  #bH{right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(104px + env(safe-area-inset-bottom,0px));width:56px;height:56px}
}
/* phones held upright: the hotbar docks above the thumbs */
@media (max-width:600px) and (orientation:portrait){
  .touch .hudL{top:auto;bottom:calc(168px + env(safe-area-inset-bottom,0px));right:var(--hud-r);width:auto}
  .touch #hotbar{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
  .touch #hotbar .slot{width:100%;height:auto;aspect-ratio:1}
  .touch #hotbar .slot img{width:28px;height:28px}
  .touch #buffs{order:-1;margin:0 0 4px}
  .touch #toast{bottom:calc(270px + env(safe-area-inset-bottom,0px))}
  .touch #chatLog{bottom:calc(290px + env(safe-area-inset-bottom,0px))}
  .touch #bossbar{top:auto;bottom:calc(320px + env(safe-area-inset-bottom,0px))}
  #bP,#bE{bottom:calc(var(--touch-edge) + var(--stick-size) + 104px + env(safe-area-inset-bottom,0px))}
}
/* phones on their side: everything along the top edge, the thumbs below */
@media (max-height:480px) and (orientation:landscape){
  .touch{--slot-size:38px}
  .touch #hotbar .slot img{width:28px;height:28px}
  .touch .hudR{row-gap:4px}
  .touch .where{display:none}
  .touch #miniMap{width:144px;height:90px}
  .touch #toast{bottom:78px}
  .touch #chatLog{bottom:120px;left:auto;right:calc(12px + env(safe-area-inset-right,0px));align-items:flex-end}
  #bP,#bE{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  #bP{left:calc(50% - 54px)}
  #bE{left:calc(50% + 6px)}
}

/* ---------- panels: one translucent blue slab, black rim ---------- */
.overlay{position:absolute;inset:0;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(2,4,16,.42);overflow:auto}
.panel{position:relative;box-sizing:border-box;padding:14px 18px 18px;max-width:780px;width:100%;max-height:100%;overflow:auto;
  background:var(--panel-text);border:2px solid #000;border-radius:10px;box-shadow:inset 0 0 0 2px var(--bevel-hi),0 8px 24px rgba(0,0,10,.4);text-shadow:var(--o1)}
.panel h2{margin:0 0 12px;font-size:24px;font-weight:600;line-height:1.2;text-shadow:var(--o2)}
.logo{margin:0;font-size:clamp(40px,8vw,64px);line-height:1.05;text-shadow:var(--o3)}
.tag{margin:10px 0 16px;font-size:18px;color:var(--ink-2)}
.sub{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.hint{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.panel.fix{display:flex;flex-direction:column;overflow:hidden}
.panel>.close{position:absolute;top:12px;right:14px;z-index:2}
.panel>.close~h2,.panel>h2:has(~.close){padding-right:96px}
/* panels with a long list keep their title, close button and tabs in place and scroll only the list */
.pbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-right:-8px;padding-right:8px}

/* buttons: small blue text panels; pointing at one, or having chosen it, turns it gold */
:is(button.ghost,.mode,.close,.big,.bind,.rec button){padding:6px 14px 7px;font-size:16px;line-height:1.25;color:var(--ink);text-shadow:var(--o1);
  background:var(--panel);border:2px solid #000;border-radius:6px;box-shadow:inset 0 0 0 2px var(--bevel-hi);transition:background-color .08s,color .08s,border-color .08s}
:is(button.ghost,.mode,.close,.big,.bind,.rec button):hover:not(:disabled){background:var(--panel-hi);color:var(--gold);border-color:var(--gold)}
:is(button.ghost,.mode,.close,.big,.bind,.rec button):active:not(:disabled){transform:translateY(1px)}
:is(button.ghost,.mode,.big,.rec button):disabled{color:var(--ink-3);background:var(--panel-lo);box-shadow:none}
button.ghost.sm,.close{padding:3px 10px 4px;font-size:15px}
.big{padding:9px 22px 10px;font-size:20px;background:var(--panel-hi)}
/* the one action a panel exists for wears a gold rim, as a chosen slot does */
.big:not(:disabled){border-color:var(--gold);box-shadow:inset 0 0 0 2px rgba(255,240,150,.3)}
.mode.on,.ghost.on{color:var(--gold);background:var(--panel-hi);border-color:var(--gold)}
/* world rules: an off rule sinks back, an on rule stands lit */
.ghost.rule.on{color:var(--ink);background:var(--panel-hi);border-color:#000}
.ghost.rule:not(.on){color:var(--ink-3);background:var(--panel-lo)}
.ghost.warn{color:var(--bad);border-color:#7a0f1a}
.ghost.warn:hover{color:#ffb3b3;border-color:var(--bad);background:rgba(120,30,50,.85)}
.modes{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.modes .sub{margin:0}
.tabs{margin:0 0 12px}
input[type=text],input[type=search]{font:16px var(--font);color:var(--ink);padding:6px 10px;background:var(--field);border:2px solid #000;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(110,130,220,.22);
  text-shadow:none;-webkit-user-select:text;user-select:text}
input[type=text]:focus,input[type=search]:focus{outline:none;border-color:var(--gold)}
input[type=search]::-webkit-search-cancel-button{filter:grayscale(1) brightness(2)}
input[type=checkbox]{appearance:none;flex:none;width:22px;height:22px;margin:0;display:grid;place-items:center;background:var(--field);border:2px solid #000;border-radius:4px;box-shadow:inset 0 0 0 2px rgba(110,130,220,.22);cursor:pointer}
input[type=checkbox]::after{content:"";width:10px;height:10px;background:var(--gold);border-radius:1px;transform:scale(0);transition:transform .08s}
input[type=checkbox]:checked::after{transform:scale(1)}
input[type=checkbox]:hover{border-color:var(--gold)}
input[type=range]{appearance:none;height:24px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--field);border:2px solid #000;border-radius:4px}
input[type=range]::-moz-range-track{height:6px;background:var(--field);border:2px solid #000;border-radius:4px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:24px;margin-top:-9px;background:var(--gold);border:2px solid #000;border-radius:3px}
input[type=range]::-moz-range-thumb{width:10px;height:20px;background:var(--gold);border:2px solid #000;border-radius:3px}
input[type=range]::-moz-range-progress{height:6px;background:#6f84d6}
kbd{display:inline-block;padding:1px 7px 2px;font:15px/1.3 var(--font);color:var(--ink);background:var(--slot);border:2px solid #000;border-radius:5px;box-shadow:inset 0 -2px 0 var(--bevel-lo);white-space:nowrap}
.arrowBtn{width:36px;height:34px;padding:0!important;display:inline-grid;place-items:center}
.arrowBtn::before{content:"";width:12px;height:18px;background:var(--px-left) 0 0/100% 100% no-repeat}
.arrowBtn.next::before{transform:scaleX(-1)}
.touch .arrowBtn{width:44px;height:44px}
.touch :is(.rec button,button.ghost.sm){min-height:44px}

/* ---------- bag: the hotbar opens downward into the whole inventory ---------- */
#inv .bag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;grid-template-areas:"head head" "inv craft" "chest craft" "gear craft" "x craft";gap:10px 18px;max-width:900px;align-content:start}
#inv .bagL{display:contents}
.invHead{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.invLabel{font-size:18px;line-height:24px;text-shadow:var(--o2)}
.invPane{grid-area:inv}
.chestPane{grid-area:chest}
.chestPane:not(:has(>:is(#chestBox,#tableBox,#stationBox):not([hidden]))){display:none}
.chestPane h2{margin:0 0 8px;font-size:18px}
.craftPane{grid-area:craft;display:flex;flex-direction:column;min-height:0}
.gearPane{grid-area:gear;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px}
.gearPane .grid{display:flex;gap:4px}
.defBox{display:flex;align-items:center;gap:6px;align-self:center;margin-left:8px;font-size:16px;line-height:1.25;text-shadow:var(--o1)}
.defIco{flex:none;width:22px;height:24px;background:var(--px-shield) 0 0/100% 100% no-repeat}
.grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.grid .slot{width:auto;height:auto;aspect-ratio:1;max-width:var(--slot-size)}
.gearPane .grid .slot{width:var(--slot-size);height:var(--slot-size)}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
.cgrid .slot{width:auto;height:auto;aspect-ratio:1}
/* the top row is the hotbar: a little air under it */
#invGrid .slot:nth-child(-n+8){margin-bottom:6px}
.chestActs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.stationSlots{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.stationSlots .sub{display:block;font-size:14px;color:var(--ink-2)}
.stationSlots .arrow{flex:1;min-width:80px;align-self:center}
.bar{height:10px;margin-top:4px;box-sizing:border-box;background:rgba(0,0,0,.55);border:2px solid #000;border-radius:3px}
.bar i{display:block;height:100%;background:var(--ok)}
.bar.fire i{background:#ff9a3c}
.offers{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.offer{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:7px 10px;text-align:left;font:inherit;color:var(--ink);text-shadow:var(--o1);
  background:var(--panel);border:2px solid #000;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(210,160,255,.3)}
.offer:hover:not(:disabled){border-color:var(--gold);background:var(--panel-hi)}
.offer b{font-weight:600;color:var(--magic)}
.offer span{font-size:14px;color:var(--ink-2)}
.offer:disabled{background:var(--panel-lo);box-shadow:none}
.offer:disabled b{color:var(--ink-3)}
#anvilName{margin:10px 0;width:min(280px,100%)}
.anvilOut{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:15px}
.anvilOut img{width:32px;height:32px;image-rendering:pixelated}
#stationBox .hint,#tableBox .hint{margin-top:6px}

/* crafting */
#stationLine{color:var(--ink)}
.rtabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,1fr));gap:4px;margin:0 0 8px}
.rtab{position:relative;display:grid;place-items:center;aspect-ratio:1;max-height:44px;width:100%;padding:0;background:var(--slot);border:2px solid #000;border-radius:6px;box-shadow:inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo)}
.rtab img{width:24px;height:24px;image-rendering:pixelated;opacity:.7}
.rtab:hover{background:var(--slot-hi);border-color:var(--gold)}
.rtab:hover img,.rtab.on img{opacity:1}
.rtab.on{border-color:var(--gold);background:rgba(120,110,60,.82)}
.rtab .cnt{position:absolute;right:3px;bottom:1px;font-size:13px;line-height:1;color:var(--ok);text-shadow:var(--o1)}
.rtools{display:flex;gap:10px;align-items:center;margin:0 0 8px}
#recSearch{flex:1;width:100%;min-width:0;box-sizing:border-box;margin:0}
.rcan{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.recipes{display:flex;flex-direction:column;gap:4px}
#inv .recipes{flex:1 1 0;min-height:240px;contain:size;overflow-y:auto;overscroll-behavior:contain;padding:1px 4px 1px 1px}
.rec{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:4px 6px 4px 4px;background:rgba(24,34,80,.5);border:2px solid transparent;border-radius:6px}
.rec>div{min-width:0;overflow-wrap:anywhere}
.rec:hover{background:rgba(73,94,171,.55);border-color:var(--gold)}
.rec img{width:32px;height:32px;padding:4px;image-rendering:pixelated;background:var(--slot);border:2px solid #000;border-radius:6px;box-shadow:inset 2px 2px 0 var(--bevel-hi)}
.rec:not(.can) img{opacity:.55}
.rec:not(.can) .nm{color:var(--ink-2)}
.rec.friend{border-color:rgba(111,179,255,.75)}
.rec .nm{font-size:16px;line-height:1.3}
.rec .nm .tag{margin-left:6px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.rec.friend .tag{color:#9cc8ff}
.rec .req{font-size:14px;line-height:1.4;color:var(--ink-2)}
.rec .req b{font-weight:400;color:var(--ok)}
.rec .req s{text-decoration:none;color:var(--bad)}
.rec button{padding:3px 12px 4px;font-size:15px}
.slot.dim img{opacity:.4}
.slot.dim:not(.sel){background:var(--panel-lo)}
.rpick{display:flex;gap:10px;align-items:center;margin-top:8px;padding-top:8px;border-top:2px solid rgba(0,0,0,.35)}
.rpick[hidden]{display:none}
.rpick .slot{flex:none}
.rpick .rout{width:56px;height:56px}
.rpick .rout img{width:40px;height:40px}
.rpick .rout:not(.dim){border-color:var(--gold);box-shadow:inset 0 0 0 2px rgba(255,240,150,.3),inset 2px 2px 0 var(--bevel-hi)}
.rinfo{min-width:0;display:flex;flex-direction:column;gap:4px}
.rinfo .nm{font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--o1)}
.rneed{display:flex;flex-wrap:wrap;gap:4px}
.rneed .slot{width:40px;height:40px}
.rneed .slot img{width:24px;height:24px}
.rneed .slot .n{right:2px;font-size:13px}
.rneed .slot.lack{border-color:#7a0f1a}
.rneed .slot.lack .n{color:var(--bad)}
@media (max-width:700px){
  #inv .bag{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "inv" "chest" "gear" "craft"}
  #inv .recipes{flex:none;contain:none;max-height:60vh}
  /* the bag scrolls here, so the chosen recipe sits above the grid where a tap leaves you */
  #inv .recipes{order:1}
  #inv .rpick{margin:0 0 8px;padding:0 0 8px;border-top:0;border-bottom:2px solid rgba(0,0,0,.35)}
}
/* a big enough screen: the bag opens in place, like the game it follows. The inventory grows down from the
   hotbar, crafting fills the left edge below it, equipment stands on the right, and the world stays in view */
@media (min-width:1000px) and (min-height:620px){
  #inv.overlay{display:block;padding:0;background:none;overflow:hidden}
  #inv .bag{position:absolute;inset:0;display:block;max-width:none;max-height:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;pointer-events:none}
  #inv .bagL{position:absolute;left:var(--hud-x);top:var(--hud-y);bottom:16px;width:calc(8*var(--slot-size) + 28px);display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:visible;padding-right:6px;pointer-events:none}
  #inv .bagL>*{pointer-events:auto;flex:none}
  #inv .invHead{height:24px;min-height:0}
  #inv .invPane .grid{grid-template-columns:repeat(8,var(--slot-size))}
  #inv .invPane .slot{width:var(--slot-size);height:var(--slot-size)}
  #inv .chestPane,#inv .craftPane{margin-top:8px;padding:10px 12px 12px;background:var(--panel-text);border:2px solid #000;border-radius:10px;box-shadow:inset 0 0 0 2px var(--bevel-hi)}
  #inv .craftPane{flex:1 1 auto;min-height:220px}
  #inv .recipes{min-height:120px}
  #inv .gearPane{position:absolute;right:calc(var(--hud-r) + 40px);top:calc(var(--hud-y) + 150px);display:grid;grid-template-columns:auto auto;gap:4px;justify-items:end;pointer-events:auto}
  #inv .gearPane .grid{flex-direction:column}
  #inv #accGrid{grid-column:1;grid-row:1}
  #inv .gearCol{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:4px}
  #inv .defBox{grid-column:1/-1;margin:6px 0 0}
  #app:has(#inv:not([hidden])) .hudL,#app:has(#inv:not([hidden])) :is(.where,#navHud,#bossbar){visibility:hidden}
}
/* smaller screens: an open panel covers the world, so the HUD steps out instead of showing through */
@media not all and (min-width:1000px) and (min-height:620px){
  #app:has(.overlay:not([hidden]):not(#title,#dead)) #hud{visibility:hidden}
}
.gearCol{display:flex;gap:4px}

/* ---------- title: the block wordmark, then a column of big outlined words ---------- */
#title.overlay{flex-direction:column;justify-content:safe flex-start;align-items:center;gap:clamp(6px,2vh,18px);padding:clamp(14px,5vh,56px) 16px 16px;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 30%,transparent 45%,rgba(0,0,14,.45))}
#app:has(#title:not([hidden])) #hud{visibility:hidden}
/* a panel opened from the title replaces the menu rather than floating over it */
#app:has(:is(#charOv,#setOv):not([hidden])) #title>*{visibility:hidden}
.tlogo{flex:none;display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}
/* the wordmark is built from the world's own blocks (panels.js); the text stays for screen readers */
#title .logo{line-height:0;width:min(760px,92vw)}
#logoCv{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.55))}
#title .tag{margin:8px 0 0;font-size:20px;color:var(--ink);text-shadow:var(--o2)}
#title:not([data-page=main]) #title .logo,#title:not([data-page=main]) .logo{width:min(520px,80vw)}
#title:not([data-page=main]) .tag{display:none}
.tpage{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;width:min(720px,100%)}
.tpage>.panel{flex:0 1 auto;min-height:0}
.menu{flex:1 1 auto;justify-content:safe center;gap:0;padding-bottom:6vh}
.touch .mi{padding:5px 22px 8px}
.mi{display:block;padding:2px 22px 6px;font-size:34px;line-height:1.15;color:var(--ink);text-shadow:var(--o3);background:none;border:0;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),color .08s}
.mi:hover,.mi:focus-visible{color:var(--gold);transform:scale(1.12);outline:none}
.mi:active{transform:scale(1.04)}
.mi.warn{color:var(--bad)}
.mi.warn:hover,.mi.warn:focus-visible{color:#ffb3b3}
.back{margin-top:10px;font-size:28px}
#title .modes{margin-top:18px;gap:8px}
#title .modes:first-of-type{margin-top:0}
#title .hint{margin:0}
#title .mode{min-width:0;min-height:44px;padding:6px 8px}
#title #modeBox .row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#title #diffBox .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
#title #slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slot-btn{min-width:130px;text-align:left}
.slot-btn small{display:block;font-size:14px;color:var(--ink-2)}
#title .slot-btn{min-width:0;min-height:64px;padding:8px 12px;display:flex;flex-direction:column;justify-content:space-between;gap:4px;font-size:17px}
#title .slot-btn.on small{color:#fff3a6}
#title #rules{gap:6px}
#title #seedRow{margin-top:4px}
#seedIn{box-sizing:border-box;width:100%;max-width:360px;min-height:42px}
#joinCode,#charName{min-width:0}
#joinCode{width:8.5em;min-height:40px;box-sizing:border-box;letter-spacing:.2em;text-transform:uppercase}
#joinCode::placeholder{letter-spacing:normal;text-transform:none}
#coopBox .row{align-items:center}
#coopHint .code{margin-right:4px;font-size:22px;letter-spacing:.2em;color:var(--gold)}
#coopHint .ghost.sm{padding:1px 8px 2px;font-size:14px;vertical-align:2px}
body.online #modeBox,body.guest #diffBox,body.online #slotBox,body.online #newBtn{display:none!important}
#recentWorlds{margin-top:10px}
#recentWorlds .recentRow{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:15px}
#recentWorlds .recentRow button{margin-left:auto}
#recentWorlds .recentRow .sub{margin:0;font-size:15px;font-weight:400;color:var(--ink-2)}
#recentWorlds .dot{width:10px;height:10px;flex:none;background:#3a4680;border:2px solid #000}
#recentWorlds .dot.on{background:var(--ok)}
.help{display:grid;gap:18px;font-size:15px;line-height:1.45}
.help h3{margin:0 0 4px;font-size:20px;font-weight:600;line-height:1.25;text-shadow:var(--o2)}
.control-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.35}
.control-table th,.control-table td{padding:6px 6px;text-align:left;vertical-align:top;border-bottom:2px solid rgba(0,0,20,.28);overflow-wrap:break-word}
.control-table thead{display:none}
.control-table .control-group th{padding:14px 6px 4px;border:0;font-size:16px;font-weight:600;color:var(--gold)}
.control-table tbody tr:not(.control-group)>th{font-weight:400;color:var(--ink-2)}
.control-note{margin:10px 6px 0!important}
.helpTips p{max-width:68ch}
/* on a phone the touch controls come first */
.touch .help>div:nth-child(2){order:-1}
/* key rebinding needs a keyboard */
.touch .kb{display:none}
@media (min-width:860px){.help{grid-template-columns:1fr 1fr;column-gap:28px}.helpTips{grid-column:1/-1}}
@media (max-width:640px){
  .mi{font-size:28px}
  .back{font-size:24px}
  #title #modeBox .row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-height:560px){
  #title.overlay{padding-top:10px;gap:4px}
  #title .logo{width:min(380px,50vw)}
  #title .tag{font-size:16px}
  .mi{font-size:24px;padding:0 18px 3px}
  #title:not([data-page=main]) .tlogo{display:none}
  #title .tag{display:none}
  .touch .mi{padding:3px 18px 5px}
  .menu{padding-bottom:0}
}

/* ---------- other screens ---------- */
/* death: big red words over the world, no box */
#dead{background:radial-gradient(ellipse at center,rgba(60,0,10,.15) 30%,rgba(60,0,10,.5))}
#dead .panel{max-width:none;padding:0;text-align:center;background:none;border:0;box-shadow:none}
#dead h2{margin:0;font-size:clamp(40px,7vw,64px);font-weight:600;color:#e8323c;text-shadow:var(--o3)}
#dead .tag{margin-top:10px;font-size:20px;color:var(--ink);text-shadow:var(--o2)}
.end{max-width:560px;text-align:center}
.end .logo{font-size:clamp(40px,8vw,56px);font-weight:600;color:var(--gold)}
.end .tag{color:var(--ink)}
.end .row{justify-content:center}
.endStats{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:14px 0;text-align:left}
.endStats div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:2px solid rgba(0,0,20,.28)}
.endStats span{color:var(--ink-2)}
/* the map nearly fills the screen */
#mapOv .panel{display:flex;flex-direction:column;max-width:1400px;height:100%}
.mapScroll{flex:1 1 auto;min-height:0;overflow:auto;background:#05070f;border:3px solid #d9b347;outline:2px solid #000;border-radius:2px;touch-action:pan-x pan-y}
#mapCv{display:block;width:2048px;height:520px;max-width:none;image-rendering:pixelated}
#mapLegend{flex:none}
/* the legend keys are drawn swatches, not text squares */
#mapLegend span{display:inline-block;width:10px;height:10px;margin-right:2px;font-size:0;vertical-align:-1px;background:currentColor;border:2px solid #000}
/* townsfolk talk in a box at the top of the screen, the world still in view */
#npcOv{align-items:flex-start;background:none;padding-top:calc(var(--hud-y) + 4px)}
.npc{max-width:600px;max-height:min(78vh,100%)}
.npc .say{margin:4px 0 12px;min-height:2.6em;font-size:17px;line-height:1.45}
.shop{display:flex;flex-direction:column;gap:4px;margin-top:12px}
/* journal */
.achs,.best{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px}
.ach,.beast{display:flex;gap:8px;align-items:center;padding:6px 8px;background:rgba(24,34,80,.5);border-radius:6px}
.ach b,.beast b{display:block;font-size:16px;font-weight:500}
.ach span,.beast span{font-size:14px;color:var(--ink-2)}
.ach.got b{color:var(--gold)}
.ach:not(.got) b{color:var(--ink-2)}
.ach em{font-style:normal;color:var(--ink)}
.beast img{width:32px;height:32px;image-rendering:pixelated;object-fit:contain}
.beast .unk{flex:none;width:32px;height:32px;display:grid;place-items:center;font-size:18px;color:var(--ink-3);background:var(--slot);border:2px solid #000;border-radius:6px}
#logBody>.sub:first-child{position:sticky;top:0;z-index:1;margin:0;padding-bottom:8px;background:var(--panel-text)}
/* character */
.charPanel{max-width:620px}
.charWrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
#charPrev{flex:none;width:120px;height:186px;image-rendering:pixelated;background:var(--slot);border:2px solid #000;border-radius:8px;box-shadow:inset 2px 2px 0 var(--bevel-hi),inset -2px -2px 0 var(--bevel-lo)}
.charOpts{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
#charName{width:100%;box-sizing:border-box}
.charRow{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.charRow .sub{margin:0}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:30px;height:30px;padding:0;border:2px solid #000;border-radius:5px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.swatch:hover{border-color:var(--gold)}
.swatch.on{border-color:var(--gold);box-shadow:inset 0 0 0 2px #000,0 0 0 2px var(--gold)}
.touch .swatch{width:44px;height:44px}
.stepper{display:flex;align-items:center;gap:8px}
.stepper b{min-width:5.5em;text-align:center;font-weight:500}
/* settings */
.setPanel{max-width:620px}
.setPanel .sub:not(:first-child){margin-top:16px}
.setPanel .rcan{white-space:normal;font-size:15px;color:var(--ink)}
.slider{display:grid;grid-template-columns:76px 1fr 44px;gap:10px;align-items:center;margin:4px 0;font-size:15px}
.slider input{width:100%}
.slider output{color:var(--ink-2);text-align:right}
.binds{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px}
.bind{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 6px 4px 10px;font-size:15px;text-align:left}
.bind kbd{font-size:14px}
.bind.wait{border-color:var(--gold);color:var(--gold)}
.bind.wait kbd{color:var(--gold)}

/* ---------- effects ---------- */
#portalFx{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(176,96,240,.25),rgba(96,30,160,.85));mix-blend-mode:screen}
#fade{position:absolute;inset:0;background:#05060a;opacity:0;pointer-events:none;transition:opacity 1s}
#fade.on{opacity:1}
#flash{position:absolute;inset:0;background:#f6f8ff;opacity:0;pointer-events:none;transition:opacity .15s}
#flash.on{opacity:.75;transition:none}
/* co-op: down and waiting for a friend (party.js) */
#downVeil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(90,0,0,0) 35%,rgba(120,10,10,.75) 100%);display:flex;align-items:flex-start;justify-content:center}
#downVeil p{margin-top:18vh;font-size:22px;color:#ffd0c8;text-shadow:var(--o2)}

/* ---------- co-op: chat, session card, trips, emotes ---------- */
#chatLog{position:absolute;left:var(--hud-x);bottom:calc(64px + env(safe-area-inset-bottom,0px));max-width:min(460px,calc(100% - 32px));display:flex;flex-direction:column;gap:1px;pointer-events:none}
#chatLog p{margin:0;font-size:17px;line-height:1.3;text-shadow:var(--o1);transition:opacity .6s;overflow-wrap:anywhere}
#chatLog p b{color:#a9d6ff;font-weight:500}
#chatLog p b.me{color:var(--gold)}
#chatLog p.sys{color:#8ff0cf}
#chatLog p.old{opacity:0}
#chatLog.open p.old{opacity:1}
#chatIn{position:absolute;left:var(--hud-x);bottom:calc(24px + env(safe-area-inset-bottom,0px));width:min(460px,calc(100% - 32px));box-sizing:border-box}
.touch #chatLog{bottom:calc(200px + env(safe-area-inset-bottom,0px))}
/* Phase 12d: the co-op session card and list */
.sessList{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px;margin-top:6px}
.sessCard{padding:6px 8px;background:rgba(24,34,80,.5);border:2px solid #000;border-radius:6px}
.sessCard>b{font-size:16px;font-weight:500}
.sessTitle{margin-left:6px;padding:0 6px;font-size:13px;color:#000;text-shadow:none;background:var(--gold);border-radius:3px}
.sessRows{display:grid;grid-template-columns:1fr auto;gap:1px 8px;margin-top:4px;font-size:14px;color:var(--ink-2)}
.sessRows i{font-style:normal;color:var(--ink)}
#sessOv .panel{max-width:680px}
/* Phase 12e: trips, the emote wheel */
#tripBar{position:fixed;top:calc(var(--hud-y) + 44px);left:50%;transform:translateX(-50%);z-index:35;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;max-width:min(560px,calc(100vw - 32px));padding:8px 12px;
  font-size:15px;color:var(--ink);text-shadow:var(--o1);background:var(--panel-text);border:2px solid #000;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(210,160,255,.35)}
#tripBar b{color:var(--magic);font-weight:500}
#tripBar .sub{flex-basis:100%;margin:0;text-align:center;font-size:14px;font-weight:400;color:var(--ink-2)}
#emoteWheel{position:fixed;inset:0;z-index:40;background:rgba(2,4,16,.35)}
#emoteWheel button{position:absolute;transform:translate(-50%,-50%);min-width:96px}
#emoteWheel button b{margin-right:3px;font-weight:400;color:var(--ink-2)}
#emoteWheel .emHint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px;text-shadow:var(--o2);pointer-events:none}

/* ---------- tooltip ---------- */
#tip{position:fixed;left:0;top:0;z-index:100;pointer-events:none;max-width:280px;padding:7px 10px 8px;font-size:16px;line-height:1.4;color:var(--ink);text-shadow:var(--o1);
  background:rgba(40,52,110,.94);border:2px solid #000;border-radius:7px;box-shadow:inset 0 0 0 2px var(--bevel-hi),0 6px 16px rgba(0,0,10,.45);animation:tipIn .08s ease-out}
@keyframes tipIn{from{opacity:0}}
.tipName{font-size:17px;color:#fff}
.tipName.ench{color:var(--magic)}
.tipN{font-size:15px;color:var(--ink-2)}
.tipEnch{color:var(--magic)}
.tipStat{color:#a9d6ff}
.tipDur{height:8px;margin:5px 0 2px;box-sizing:border-box;background:rgba(0,0,0,.55);border:2px solid #000;border-radius:3px}
.tipDur i{display:block;height:100%}
.tipSmall{font-size:14px;color:var(--ink-2)}
.tipSmall.lack{color:var(--bad)}
.tipDesc{margin-top:4px;padding-top:4px;border-top:2px solid rgba(0,0,20,.35);font-size:15px;color:var(--ink-2)}
.tipText{white-space:pre-line}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.mi:hover,.mi:focus-visible{transform:none}}