/* ⛏️ PIG CRAFT — the look. Dark, earthy, and out of the way of the world. */
:root {
  --ink: #f2ecff;
  --muted: #a99cc4;
  --edge: rgba(255, 255, 255, .16);
  --panel: rgba(24, 17, 40, .94);
  --gold: #ffd75e;
  --good: #6fe08f;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: #140e24;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; align-items: center; }

/* ---- screens ---- */
.screens { display: none; width: 100%; }
.screens.on { display: block; }
.screen { display: none; padding: 1rem .8rem 2rem; }
.screen.active { display: block; }
.panel {
  width: min(94vw, 34rem); margin: 1.2rem auto;
  padding: 1.1rem 1.2rem 1.4rem;
  background: var(--panel); border: 2px solid var(--edge); border-radius: 1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.kicker { margin: 0; font-size: .72rem; font-weight: 900; letter-spacing: .14em; color: var(--gold); }
h1 { margin: .1rem 0 .4rem; font-size: clamp(1.9rem, 7vw, 2.8rem); }
h2 { margin: 0 0 .4rem; font-size: clamp(1.3rem, 5vw, 1.7rem); }
h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
.lede { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.45; color: #ded4f2; }
.hint { margin: .4rem 0 .8rem; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.foot { margin: .7rem 0 0; font-size: .76rem; color: var(--muted); text-align: center; }
.fieldlab { display: block; margin: .5rem 0 .25rem; font-size: .72rem; font-weight: 900; color: var(--muted); letter-spacing: .06em; }
#pc-name, #fr-code-in {
  width: 100%; padding: .6rem .7rem; margin-bottom: .8rem;
  font: inherit; font-weight: 800; font-size: 1rem; color: inherit;
  background: rgba(255, 255, 255, .07); border: 2px solid var(--edge); border-radius: .7rem;
}

/* The code for a shared world. It gets read out loud across a room, or typed
   in off a screenshot, so it is big, spaced out, and picked by one tap. */
.roomcode {
  margin: 0 0 .6rem; padding: .5rem .4rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(1.4rem, 7vw, 2.1rem); font-weight: 900; letter-spacing: .22em;
  text-align: center; color: var(--good); word-break: break-all;
  background: rgba(255, 255, 255, .06); border: 2px dashed var(--edge); border-radius: .7rem;
  user-select: all; -webkit-user-select: all;
}
#fr-code-in { text-transform: uppercase; letter-spacing: .12em; text-align: center; }
.btn {
  display: block; width: 100%; margin: .4rem 0; padding: .7rem .8rem;
  font: inherit; font-weight: 800; font-size: .95rem; color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 2px solid var(--edge); border-radius: .8rem;
}
.btn:hover { background: rgba(255, 255, 255, .12); }
.btn.primary { background: linear-gradient(#7a4bd0, #5b31a8); border-color: #a97fee; }
.btn.big { font-size: 1.1rem; padding: .85rem; }
.btn.ghost { background: rgba(255, 255, 255, .04); font-size: .86rem; padding: .55rem .7rem; }
.btn.danger { border-color: rgba(255, 130, 130, .4); color: #ffb0b0; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.keys { width: 100%; border-collapse: collapse; font-size: .86rem; }
.keys th { text-align: left; padding: .3rem .4rem .3rem 0; color: var(--muted); font-weight: 800; white-space: nowrap; }
.keys td { padding: .3rem 0; }
kbd {
  display: inline-block; padding: .1rem .4rem; margin: 0 .1rem;
  font: inherit; font-size: .8rem; font-weight: 800;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--edge); border-radius: .35rem;
}

/* ---- worlds ---- */
.worlds { display: grid; gap: .5rem; margin: .5rem 0 .8rem; }
.wcard {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
  padding: .65rem .7rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.wcard .wicon { font-size: 1.6rem; flex: none; line-height: 1.1; }
.wcard .wbody { flex: 1; min-width: 0; }
.wcard .wname { display: block; font-weight: 800; font-size: .98rem; }
.wcard .wblurb { display: block; font-size: .78rem; color: var(--muted); line-height: 1.34; }
.wcard .wneed { display: block; margin-top: .2rem; font-size: .75rem; font-weight: 800; color: var(--gold); }
/* What you have got in that world, so the worlds screen is also the answer to
   "did it save?" — see worldNote in game.js. */
.wcard .wmine { display: block; margin-top: .25rem; font-size: .74rem; font-weight: 700; color: #9fe3b4; }
.wcard.here { border-color: rgba(111, 224, 143, .6); background: rgba(111, 224, 143, .12); }
.wcard.locked { opacity: .62; }
.wcard.locked .wneed { color: #ff9ec4; }

/* ---- crafting ---- */
.recipes { display: grid; gap: .45rem; margin: .4rem 0 .8rem; }
.rcp {
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem .6rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge);
}
.rcp .ricon { font-size: 1.4rem; flex: none; }
.rcp .rbody { flex: 1; min-width: 0; }
.rcp .rname { display: block; font-weight: 800; font-size: .9rem; }
.rcp .rcost { display: block; font-size: .76rem; color: var(--muted); }
.rcp .rbtn {
  flex: none; cursor: pointer; font: inherit; font-weight: 800; font-size: .78rem;
  padding: .4rem .65rem; border-radius: .6rem; color: inherit;
  background: rgba(111, 224, 143, .16); border: 2px solid rgba(111, 224, 143, .5);
}
.rcp .rbtn[disabled] { opacity: .4; cursor: not-allowed; }
.rcp.have { border-color: rgba(255, 215, 94, .5); background: rgba(255, 215, 94, .1); }

/* ---- the game ---- */
.play { width: 100%; display: flex; flex-direction: column; align-items: center; padding: .4rem; }
.stage { position: relative; width: min(98vw, 62rem); line-height: 0; }
#cv {
  display: block; width: 100%; height: auto;
  aspect-ratio: 960 / 600;
  background: #0d0a16; border: 2px solid var(--edge); border-radius: .7rem;
  touch-action: none; cursor: crosshair;
}

/* The crosshair doubles as the digging clock: the ring fills as the block
   gives way, so your eyes never have to leave the middle of the screen. */
.cross {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; pointer-events: none; --p: 0deg;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) 50% 50% / 2px 12px no-repeat,
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)) 50% 50% / 12px 2px no-repeat;
  opacity: .6; transition: opacity .12s;
}
.cross.aimed { opacity: 1; }
.cross.digging::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--gold) var(--p), rgba(255,255,255,.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
  mask: radial-gradient(circle, transparent 62%, #000 64%);
}

.say {
  position: absolute; left: 50%; top: 12%; transform: translateX(-50%);
  margin: 0; padding: .4rem .8rem; max-width: 86%;
  font-size: .86rem; font-weight: 800; line-height: 1.3; text-align: center;
  background: rgba(12, 8, 22, .82); border: 2px solid var(--edge); border-radius: .7rem;
  pointer-events: none;
}
.pausemenu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92%, 26rem); padding: 1rem 1.1rem 1.1rem; line-height: 1.3;
  background: rgba(12, 8, 22, .93); border: 2px solid var(--edge); border-radius: 1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.pausemenu .pt { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 900; letter-spacing: .04em; }
.pausemenu .prow { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: .4rem; }
.pausemenu .btn { margin: .25rem 0; }
.pausemenu .hint { margin: .6rem 0 0; }

/* ---- the phone buttons, on top of the world ---- */
.tpad { display: none; }
body.touch .tpad {
  display: flex; gap: .5rem; align-items: flex-end;
  position: absolute; right: .6rem; bottom: .6rem;
}
.tbtn {
  width: 3.4rem; height: 3.4rem; cursor: pointer; font: inherit; font-size: 1.4rem; color: inherit;
  background: rgba(12, 8, 22, .6); border: 2px solid var(--edge); border-radius: 50%;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.tbtn.dig { border-color: rgba(255, 215, 94, .55); }
.tbtn.put { border-color: rgba(111, 224, 143, .55); }

.hud {
  display: flex; align-items: center; gap: .6rem;
  width: min(98vw, 62rem); margin-bottom: .35rem;
}
.hearts { font-size: 1rem; letter-spacing: .06em; flex: none; }
.pcgoal { flex: 1; min-width: 0; font-size: .8rem; font-weight: 700; color: var(--gold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hudright { display: flex; gap: .3rem; flex: none; }
.hbtn {
  cursor: pointer; font: inherit; font-size: 1rem; color: inherit;
  padding: .25rem .5rem; border-radius: .5rem;
  background: rgba(255, 255, 255, .08); border: 2px solid var(--edge);
}
.hotbar {
  display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap;
  width: min(98vw, 62rem); margin-top: .4rem;
}
.slot {
  position: relative; width: 3rem; height: 3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: inherit;
  background: rgba(255, 255, 255, .06); border: 2px solid var(--edge); border-radius: .5rem;
}
.slot.on { border-color: var(--gold); background: rgba(255, 215, 94, .16); }
.slot .n { position: absolute; right: .15rem; bottom: .05rem; font-size: .62rem; font-weight: 900; }
.slot .k { position: absolute; left: .18rem; top: .02rem; font-size: .58rem; color: var(--muted); }
.tips { margin: .5rem 0 0; font-size: .76rem; color: var(--muted); text-align: center; }
.build { margin: .6rem 0 1rem; font-size: .68rem; color: rgba(255, 255, 255, .28); }

/* ---- a phone held upright ---- */
/* The world gets most of the screen and the eight slots stay on one row. A
   960x600 letterbox on a tall phone leaves two thirds of the screen empty. */
@media (max-width: 640px) {
  .stage { width: 100%; }
  #cv { aspect-ratio: auto; height: min(60vh, 30rem); }
  .hud { flex-wrap: wrap; }
  .pcgoal { order: 3; flex-basis: 100%; white-space: normal; text-overflow: clip; }
  .food { width: 3.6rem; }
  .hearts { font-size: .82rem; }
  .hbtn { padding: .2rem .35rem; font-size: .9rem; }
  .hotbar { gap: .22rem; flex-wrap: nowrap; }
  .slot { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }
  .slot .n { font-size: .56rem; }
  .slot .k { font-size: .5rem; }
  .tbtn { width: 3rem; height: 3rem; font-size: 1.2rem; }
}

/* ---- hunger, armour and the pocket ---- */
.food {
  flex: none; width: 5.5rem; height: .8rem; border-radius: .4rem; overflow: hidden;
  background: rgba(255, 255, 255, .10); border: 2px solid var(--edge);
}
.food i { display: block; height: 100%; width: 100%; background: linear-gradient(#e0a054, #b4712f); transition: width .25s; }
.food.low i { background: linear-gradient(#ff9a6a, #d0442f); }
.armour { flex: none; font-size: .8rem; font-weight: 900; color: #b9d8ff; }
.tbtn.eat { border-color: rgba(255, 154, 106, .6); }

/* ---- crafting, grouped ---- */
.rgroup {
  margin: .7rem 0 .1rem; font-size: .72rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.rcp .rblurb { display: block; font-size: .72rem; color: var(--muted); line-height: 1.3; }
.lede.warn { color: #ffd0a8; }
.hint.good { color: var(--good); font-weight: 800; }

/* ---- ten worlds want more room ---- */
.panel.wide { width: min(96vw, 54rem); }
.worlds { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.wcard .wblurb { font-size: .75rem; }

/* ---- enchanting ---- */
.stars { font-weight: 400; color: var(--gold); letter-spacing: .05em; }
.rcp .rname b.stars { font-size: .85rem; }

/* ---- slots and the bag ---- */
/* The icon is its own layer so the count and the key number sit on top of it. */
.slot .ic, .gslot .ic {
  position: absolute; inset: 12%;
  background-image: var(--icons);
  background-repeat: no-repeat; image-rendering: pixelated;
  pointer-events: none;
}
.invgrid {
  display: grid; grid-template-columns: repeat(9, 1fr);
  gap: .25rem; margin: .5rem 0;
}
.invgrid .slot { width: 100%; height: auto; aspect-ratio: 1; }
.invgrid.hot { margin-bottom: .2rem; }
.invgrid.hot .slot { border-color: rgba(255, 215, 94, .35); }
.barlab { margin: .7rem 0 0; font-size: .66rem; font-weight: 900; letter-spacing: .12em; color: var(--muted); }
.gear {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem;
  margin: .3rem 0 .8rem; padding-bottom: .8rem;
  border-bottom: 2px solid var(--edge);
}
.gslot {
  position: relative; aspect-ratio: 1; border-radius: .5rem;
  background: rgba(255, 255, 255, .04); border: 2px dashed var(--edge);
}
.gslot.has { border-style: solid; border-color: rgba(255, 215, 94, .45); background: rgba(255, 215, 94, .08); }
.glabel {
  position: absolute; left: 0; right: 0; bottom: .1rem;
  font-size: .52rem; font-weight: 800; line-height: 1.1; text-align: center;
  color: var(--muted); text-transform: uppercase; letter-spacing: .02em;
}
.gslot.has .glabel { color: var(--gold); }
.holding { color: var(--good); }
.tbtn.drop { border-color: rgba(180, 200, 255, .5); }

@media (max-width: 640px) {
  .gear { grid-template-columns: repeat(3, 1fr); }
  .invgrid { grid-template-columns: repeat(9, 1fr); gap: .15rem; }
  .glabel { font-size: .45rem; }
}

/* ---- full screen ---- */
/* The whole page goes full screen, and a class on <body> drives the layout —
   not the :fullscreen selector on the game area. Full-screening only the game
   left every screen and menu outside the element the browser was drawing, so
   pressing E in full screen looked like nothing happening at all. */
body.full { justify-content: flex-start; }
body.full .play { padding: .2rem; }
body.full .hud, body.full .stage, body.full .hotbar { width: min(100vw, 100vw); }
body.full #cv { width: 100%; height: calc(100vh - 7.6rem); aspect-ratio: auto; }
body.full .build { display: none; }
.slot .emo, .gslot .emo {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 1.3rem;
  pointer-events: none;
}
.lan { flex: none; font-size: .74rem; font-weight: 800; color: var(--good); white-space: nowrap; }

/* ---- screens that sit over the world ---- */
/* Crafting, the bag, enchanting and the worlds keep the world you are standing
   in behind them, so pressing E feels like opening something rather than
   leaving. The title and the how-to still take the whole page. */
.screens.over {
  position: fixed; inset: 0; z-index: 30; overflow: auto;
  background: rgba(9, 6, 16, .78);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.screens.over .panel { margin-top: .6rem; margin-bottom: .6rem; }
.btn.put { border-color: rgba(255, 215, 94, .55); background: rgba(255, 215, 94, .12); }
.pausemenu .warnline { color: #ffd0a8; font-weight: 800; margin: .4rem 0 0; }
.rcp .rwhy {
  display: block; margin-top: .2rem; font-size: .74rem; font-weight: 800;
  line-height: 1.3; color: #ffd0a8;
}

/* ---- the worlds, opened from inside the game ---- */
/* On the title screen there is nothing else to look at, so every world gets a
   sentence about it. Over the top of the world you are standing in, the
   sentences are what turn a map into a wall — you only need to know which one
   it is and whether it is open yet. */
.screens.over #s-worlds .panel { width: min(94vw, 40rem); }
.screens.over #s-worlds .lede { display: none; }
.screens.over .worlds { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .3rem; }
.screens.over .wcard { padding: .45rem .5rem; gap: .45rem; align-items: center; }
.screens.over .wcard .wblurb { display: none; }
.screens.over .wcard .wmine { margin-top: .1rem; font-size: .66rem; }
.screens.over .wcard .wicon { font-size: 1.3rem; }
.screens.over .wcard .wname { font-size: .88rem; }
.screens.over .wcard .wneed { margin-top: .1rem; font-size: .68rem; }
/* the green border already says where you are; the words only make it wrap */
.screens.over .wcard .whereis { display: none; }

/* ===== Places: three homes, and the compass points of a world ===== */
.homes, .spots { display: grid; gap: 10px; margin: 10px 0 4px; }
.homes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.spots { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.home, .spot {
  border: 1px solid #3a3350; border-radius: 12px; background: #221d33;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.home.set { border-color: #6b5bb5; background: #272044; }
.home .hname, .spot .sname { font-weight: 700; display: flex; align-items: center; gap: 7px; }
.home .hwhere, .spot .swhere { font-size: 12px; color: #b6aed0; min-height: 1.2em; }
.home .hrow { display: flex; gap: 7px; }
.home .btn, .spot .btn { padding: 7px 10px; font-size: 13px; flex: 1; }
.spot { cursor: pointer; }
.spot:hover { border-color: #6b5bb5; }

/* ===== A chest: the same grid as the bag, twice ===== */
.chestrow { display: flex; gap: 8px; margin: 10px 0 2px; }
.chestrow .btn { flex: 1; }
#s-chest .invgrid { margin-bottom: 4px; }

/* ===== the little sun and moon on the bar ===== */
.clock { font-size: 17px; line-height: 1; padding: 0 2px; user-select: none; }

/* ===== creeping ===== */
.creeping {
  font: 600 12px/1 system-ui, sans-serif; color: #ffd98a;
  background: #2b2438; border: 1px solid #5a4a2e; border-radius: 999px;
  padding: 5px 9px; white-space: nowrap;
}
.tbtn.creep.on { background: #6b5bb5; border-color: #a08cff; }

/* ===== the Boarlord's health, across the top ===== */
.bossbar {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 10px;
  background: rgba(24, 12, 16, .88); border: 1px solid #7a2b2b; border-radius: 999px;
  padding: 6px 14px; font: 600 13px/1 system-ui, sans-serif; color: #ffd6d6;
  pointer-events: none; white-space: nowrap;
}
.bossbar .bbar { display: block; width: 240px; height: 9px; background: #3a1a1a;
  border-radius: 999px; overflow: hidden; }
.bossbar .bbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b4a, #c4442c); }
@media (max-width: 560px) { .bossbar .bbar { width: 130px; } }

/* ===== the map, and the trophy shelf ===== */
.mapwrap { display: flex; justify-content: center; margin: 10px 0 4px; }
#mapcv { width: min(600px, 100%); height: auto; image-rendering: pixelated;
  border: 1px solid #3a3350; border-radius: 12px; background: #12131a; }
.trophy .tbar { display: block; height: 7px; background: #2b2438; border-radius: 999px;
  overflow: hidden; margin-top: 7px; }
.trophy .tbar i { display: block; height: 100%; background: linear-gradient(90deg, #6b5bb5, #a08cff); }
.trophy.done { border-color: #6b5bb5; background: #241f3a; }
.trophy.done .tbar i { background: linear-gradient(90deg, #ffd54a, #ffe9a8); }


/* ---- digging together -------------------------------------------------
   Names over the other pigs, and what everybody is saying. Both sit over the
   canvas and neither may ever swallow a click meant for the world. */
.tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; line-height: 1; }
.nametag {
  position: absolute; transform: translate(-50%, -100%);
  padding: .1rem .35rem; white-space: nowrap;
  font-size: .72rem; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px #000;
  background: rgba(12, 10, 22, .55); border-radius: .4rem;
}
.chat {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
  pointer-events: none; line-height: 1.25;
}
.chatlog { max-height: 8.5rem; overflow: hidden auto; }
.chatline {
  margin: .12rem 0; padding: .12rem .4rem; width: fit-content; max-width: 100%;
  font-size: .8rem; font-weight: 700; color: #fff; word-break: break-word;
  background: rgba(12, 10, 22, .55); border-radius: .4rem;
}
.chatline b { color: var(--good); }
.chatline.note { font-style: italic; color: #cfc7e6; }
.chatrow { display: flex; gap: .4rem; align-items: center; margin-top: .3rem; flex-wrap: wrap; }
/* 🎤 Talking out loud. It has to be obvious when a microphone is live, so the
   button is plainly lit the whole time it is on. */
/* Beside the shared-world badge on the top bar, so it is on screen the whole
   time you are digging with somebody — the chat box hides itself, and a button
   you cannot find is a button that is not there. .btn is a full-width menu
   button in this game, so all of that has to be undone for a badge-sized one. */
.btn.voice {
  display: inline-block; width: auto; flex: none; margin: 0;
  padding: .2rem .5rem; font-size: .74rem; line-height: 1.5;
  white-space: nowrap; border-radius: .5rem;
}
.btn.voice.on {
  background: rgba(255, 90, 80, .28);
  border-color: #ff8f8f;
  color: #ffd9d6;
}
#chatin {
  flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; pointer-events: auto;
  font: inherit; font-weight: 700; font-size: .9rem; color: inherit;
  background: rgba(12, 10, 22, .85); border: 2px solid var(--edge); border-radius: .6rem;
}
#chatsend { display: none; }
#chatin:not([hidden]) + #chatsend { display: block; width: auto; margin: 0; pointer-events: auto; }
.lan { cursor: pointer; }

/* The barding slot on its own, so it does not look like a bag with one thing
   in it. */
.invgrid.one { grid-template-columns: repeat(1, 1fr); max-width: 4.2rem; }

/* ---- your shared worlds ---------------------------------------------- */
/* A code you cannot remember is a world you cannot get back to, so every one
   this computer has been in is kept and listed. See rememberRoom in game.js. */
#fr-mine { margin: .9rem 0 .2rem; }
.roomlist { display: grid; gap: .4rem; margin: .5rem 0 .2rem; }
.rcard { display: flex; align-items: center; gap: .6rem; width: 100%;
         padding: .5rem .6rem; text-align: left;
         border: 1px solid rgba(255, 255, 255, .14); border-radius: .6rem;
         background: rgba(255, 255, 255, .05); color: inherit; }
.rcard:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .09); }
.rcard.here { border-color: rgba(111, 224, 143, .6); background: rgba(111, 224, 143, .12); }
/* The code and the arrow are both buttons, and a button with no background of
   its own is a light grey lozenge from the browser — which on a dark panel
   looks like somebody spilled something on it. */
.rcard .rcode, .rcard .rgo {
  font: inherit; background: none; border: 0; padding: .1rem .2rem;
  cursor: pointer; border-radius: .4rem;
}
.rcard .rcode { font-weight: 900; letter-spacing: .12em; font-size: 1.02rem;
                flex: none; color: inherit; }
.rcard .rcode:hover, .rcard .rgo:hover { background: rgba(255, 255, 255, .12); }
.rcard .rgo { flex: none; font-size: .78rem; font-weight: 800; color: var(--gold); white-space: nowrap; }
.rcard .rbody { flex: 1; min-width: 0; }
.rcard .rwhen { display: block; margin-top: .1rem; font-size: .72rem; color: var(--muted); }
.rname-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .8rem; font-weight: 700;
  padding: .2rem .35rem; border-radius: .35rem;
  border: 1px solid rgba(255, 255, 255, .18);
  /* A SOLID colour, not a see-through one. A translucent background here came
     out as a white box with black text on a dark purple panel — the rule was
     applying the whole time, it was what it was sitting on top of that was
     wrong. Proved by turning it red and looking. */
  background: #241a3c; color: #f2eef8;
  appearance: none; -webkit-appearance: none;
}
.rname-in::placeholder { color: rgba(242, 238, 248, .38); font-weight: 400; }
.rname-in:focus { outline: 0; border-color: rgba(255, 255, 255, .5); }
/* Over the game the panel is tighter — but "last played" stays. Which world was
   which is the whole question this list answers. */
.screens.over .rcard { padding: .35rem .45rem; gap: .45rem; }
.screens.over .rcard .rcode { font-size: .9rem; }
.screens.over .rcard .rwhen { font-size: .66rem; }

/* ---- trading with a village pig --------------------------------------- */
.trades { display: grid; gap: .5rem; margin: .6rem 0 .4rem; }
.trade { display: flex; align-items: center; gap: .7rem; width: 100%;
         padding: .55rem .65rem; text-align: left; font: inherit; color: inherit;
         border: 1px solid rgba(255, 255, 255, .14); border-radius: .6rem;
         background: rgba(255, 255, 255, .05); cursor: pointer; }
.trade:hover:not(:disabled) { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .09); }
.trade:disabled { opacity: .45; cursor: not-allowed; }
.trade .tgive, .trade .tget { display: flex; align-items: center; gap: .3rem; font-weight: 800; }
.trade .tget { color: var(--gold); }
.trade .tarrow { color: var(--muted); font-weight: 900; }
.trade .tname { flex: 1; text-align: right; font-size: .78rem; color: var(--muted); }