:root {
  --ink: #383848;
  --paper: #f8f8f8;
  --frame: #78a0e0;
  --red: #e04040;
  --dex: #d83838;
  --dex-dark: #902020;
  --screen: #e8f4dc;
  --gold: #f8d030;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #183018;
  font-family: 'Press Start 2P', monospace;
  color: var(--ink);
  -webkit-font-smoothing: none;
  user-select: none;
  -webkit-user-select: none;
}
#game { position: fixed; left: 0; top: 0; image-rendering: pixelated; display: block; }
.hidden { display: none !important; }
img { image-rendering: pixelated; }
button { font-family: inherit; }

/* Classic handheld-RPG text box: white, rounded, double frame */
.box {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--frame), 0 4px 0 rgba(0, 0, 0, .35);
  padding: 16px 18px;
}

.pill {
  position: fixed; z-index: 5;
  background: rgba(24, 24, 40, .78); color: #f8f8f8;
  border: 2px solid rgba(255, 255, 255, .25); border-radius: 8px;
  font-size: 10px; padding: 8px 10px;
}
.btn {
  font-size: 12px; padding: 12px 14px; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: 0 3px 0 var(--ink);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--red); color: #fff; }
.pill.btn { background: rgba(24, 24, 40, .78); color: #fff; border-color: rgba(255, 255, 255, .35); box-shadow: none; font-size: 10px; padding: 8px 10px; }

/* HUD */
.hud { position: fixed; top: 12px; left: 12px; z-index: 5; padding: 12px 14px; min-width: 190px; font-size: 11px; }
.hud-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.hud .lv { color: var(--red); }
.xpbar { height: 6px; background: #c8c8d0; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.xpbar div { height: 100%; width: 0; background: #48a8f0; transition: width .4s; }
.hud .coins { justify-content: flex-start; gap: 16px; }
.hud .coins .cn, .hud .coins .tk { display: flex; align-items: center; gap: 6px; }
.hud .coins .ci { color: #d8a010; }
.hud .coins .tk { color: #c8502a; }
.hud .coins .tk .tok { width: 8px; height: 14px; }
.hud .wx { margin-left: auto; color: #3878e0; cursor: help; }
.hud .clock { margin-top: 6px; color: #686878; font-size: 9px; }
.hud .clock #hudClockIcon { color: #e8a010; }
.hud.night .clock #hudClockIcon { color: #6878d8; }
#menuBtn { top: 12px; right: 12px; }
.fps { top: 48px; right: 12px; font-size: 9px; min-width: 64px; text-align: center; color: #a8f0a0; font-variant-numeric: tabular-nums; }
.fps.mid { color: #f8e070; }
.fps.low { color: #f88870; }
.hint { left: 50%; top: 16px; transform: translateX(-50%); font-size: 11px; white-space: nowrap; }

/* Quick-equip circles beside the HUD box: bait/lure, then rod */
.quick { position: absolute; left: calc(100% + 10px); top: 0; display: flex; gap: 8px; }
@media (max-width: 600px) { .quick { left: 0; top: calc(100% + 8px); } } /* narrow screens: under the box, clear of MENU */
.q-slot { position: relative; }
.q-btn {
  position: relative; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper, #f8f8f0); border: 3px solid var(--ink, #383848); box-shadow: 0 3px 0 rgba(0,0,0,.35);
  display: grid; place-items: center;
}
.q-btn:hover { background: #fff8d8; }
.q-btn img { width: 36px; height: 36px; image-rendering: pixelated; object-fit: contain; }
.q-btn.empty img { filter: brightness(0); opacity: .28; } /* nothing equipped: a shadowed lure */
.q-n {
  position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px;
  font-size: 8px; line-height: 18px; text-align: center; color: #fff; background: var(--ink, #383848); border: 2px solid #f8f8f8;
}
.q-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 12; min-width: 210px; max-height: 300px; overflow-y: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 3px;
}
.q-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 8px; color: var(--ink, #383848); background: #eef0f6; border: 2px solid transparent; border-radius: 6px;
}
.q-menu button:hover { background: #fff8d8; }
.q-menu button.on { border-color: var(--ink, #383848); background: #fff8d8; }
.q-menu button img { width: 20px; height: 20px; image-rendering: pixelated; object-fit: contain; }
.q-menu button .nm { flex: 1; }
.q-menu button .qty { color: #686878; }
.q-menu .q-empty { font-size: 8px; color: #686878; padding: 8px; line-height: 1.7; }
.q-tip {
  position: fixed; z-index: 30; pointer-events: none; max-width: 240px; padding: 8px 10px;
  font-size: 8px; line-height: 1.8; color: var(--ink, #383848); background: var(--paper, #f8f8f0);
  border: 3px solid var(--ink, #383848); border-radius: 6px; box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
.q-tip b { display: block; font-weight: normal; color: #3878e0; margin-bottom: 2px; }
.q-tip .q-fx { color: #2c8a3c; }
.q-tip .q-dim { color: #686878; }
.q-menu .q-head { font-size: 8px; color: #686878; padding: 2px 4px 4px; }

/* Mini-map */
.minimap {
  position: fixed; z-index: 5; right: 12px; bottom: 12px; padding: 6px;
  background: rgba(24, 24, 40, .82); border: 3px solid #f8f8f8; border-radius: 8px;
  box-shadow: 0 0 0 2px #383848, 0 4px 0 rgba(0,0,0,.35);
}
.mm-head { display: flex; align-items: center; gap: 8px; color: #f8f8f8; font-size: 7px; margin-bottom: 5px; }
.mm-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f8e070; }
.mm-head button { font-family: inherit; font-size: 9px; line-height: 1; width: 16px; height: 16px; padding: 0; cursor: pointer; background: #f8f8f8; color: #383848; border: 0; border-radius: 3px; }
#mmCanvas { display: block; width: auto; height: 96px; image-rendering: pixelated; cursor: crosshair; border-radius: 3px; }
.minimap.collapsed #mmCanvas { display: none; }
.minimap.collapsed { width: auto; }
.minimap.collapsed .mm-head { margin-bottom: 0; }
.mm-tip {
  position: absolute; pointer-events: none; white-space: nowrap; font-size: 8px; padding: 5px 7px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 5px;
}
.mm-resize {
  position: absolute; left: -6px; top: -6px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 1; border-radius: 4px;
  background: linear-gradient(135deg, #f8f8f8 0 3px, transparent 3px 6px, #f8f8f8 6px 8px, transparent 8px);
}
.minimap.collapsed .mm-resize { display: none; }
.minimap.collapsed #mmBig { display: none; }

/* Full-screen map (M) */
.bigmap { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(8, 10, 24, .72); }
.bm-frame {
  position: relative; padding: 10px; background: rgba(24, 24, 40, .95); border: 4px solid #f8f8f8; border-radius: 10px;
  box-shadow: 0 0 0 3px #383848, 0 6px 0 rgba(0,0,0,.4); max-width: calc(100vw - 20px);
}
.bm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 11px; color: #f8e070; }
.bm-head #bmTitle { flex: 1; }
.bm-keys { font-size: 8px; color: #a8b0c8; }
.bm-head button { font-family: inherit; font-size: 10px; width: 22px; height: 22px; padding: 0; cursor: pointer; background: #f8f8f8; color: #383848; border: 0; border-radius: 4px; }
#bmCanvas { display: block; image-rendering: pixelated; cursor: crosshair; border-radius: 4px; }
.bm-stage { position: relative; margin: 26px 56px; }
.bm-here { font-size: 8px; padding: 3px 6px; border-radius: 4px; background: #ff6060; color: #fff; }
.bm-nav {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer;
  font-family: inherit; font-size: 8px; white-space: nowrap; color: #383848; background: #f8f8f8;
  border: 2px solid #383848; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.bm-nav b { font-size: 10px; color: #e05040; }
.bm-nav:hover { background: #fff8d8; }
.bm-nav.n { top: -26px; left: 50%; transform: translate(-50%, -50%); }
.bm-nav.s { bottom: -26px; left: 50%; transform: translate(-50%, 50%); }
.bm-nav.w { left: -56px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.bm-nav.e { right: -56px; top: 50%; transform: translate(50%, -50%) rotate(90deg); }
.bm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 8px; color: #d8e0f0; }
.bm-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: -1px; border: 1px solid #202030; }


/* Location banner */
.area-banner {
  position: fixed; z-index: 7; top: 12px; left: 50%; transform: translate(-50%, -140%);
  background: var(--paper); border: 4px solid var(--ink); border-radius: 0 0 10px 10px; border-top: 0;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px #78c850, 0 4px 0 rgba(0,0,0,.3);
  padding: 14px 28px; font-size: 13px; letter-spacing: 1px; transition: transform .35s steps(5); pointer-events: none;
}
.area-banner.show { transform: translate(-50%, 0); }

/* Toasts */
#toasts { position: fixed; top: 92px; right: 12px; z-index: 6; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { font-size: 10px; padding: 10px 12px; max-width: 320px; line-height: 1.6; border-left: 8px solid var(--tc, var(--frame)); transition: opacity .5s; }
.toast.fade { opacity: 0; }

/* Chat */
.chat { position: fixed; left: 12px; bottom: 12px; z-index: 6; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.chat-log {
  list-style: none; margin: 0; padding: 6px 8px; max-height: 180px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px; border-radius: 8px; transition: background .2s;
  scrollbar-width: thin;
}
.chat-log li {
  font-size: 9px; line-height: 1.7; color: #f8f8f8; text-shadow: 1px 1px 0 #101820, -1px 0 0 #101820, 0 -1px 0 #101820, 1px 0 0 #101820;
  word-wrap: break-word; animation: chatFade 2s 25s forwards; /* stays up 25s for reading, then fades (speech bubbles have their own, shorter timer) */
}
.chat-log li.sys { color: #f8e070; }
.chat-log li b { font-weight: normal; }
@keyframes chatFade { to { opacity: 0; } }
.chat.active { pointer-events: auto; }
.chat.active .chat-log { background: rgba(16, 24, 40, .72); }
.chat:not(.active):not(.resizing) .chat-log { scrollbar-width: none; } /* no stray scrollbar while chat is closed */
.chat:not(.active):not(.resizing) .chat-log::-webkit-scrollbar { display: none; }
.chat.active .chat-log li { animation: none; opacity: 1; }
.chat-form input {
  width: 100%; font-family: inherit; font-size: 10px; padding: 10px; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px; background: #fff; outline: none; user-select: text; -webkit-user-select: text;
}
.chat-hint {
  align-self: flex-start; pointer-events: auto; font-family: inherit; font-size: 8px; padding: 6px 8px; cursor: pointer;
  background: rgba(24, 24, 40, .7); color: #d8e0f0; border: 2px solid rgba(255, 255, 255, .25); border-radius: 6px;
}
.chat.active .chat-hint { display: none; }
/* resize grip on the chat's top-right corner (chat is pinned bottom-left); only while chat is open */
.chat-resize {
  position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; z-index: 1; display: none;
  cursor: nesw-resize; pointer-events: auto; border-radius: 4px;
  background: linear-gradient(225deg, #f8f8f8 0 3px, transparent 3px 6px, #f8f8f8 6px 8px, transparent 8px);
}
.chat.active .chat-resize, .chat.resizing .chat-resize { display: block; }
.chat.resizing { pointer-events: auto; }
.chat.resizing .chat-log { background: rgba(16, 24, 40, .72); }
.chat.resizing .chat-log li { animation: none; opacity: 1; }
/* the chat bar: chat button + online count (the count stays while you type) */
.chat-bar { display: flex; align-items: center; gap: 6px; position: relative; }
.chat-online {
  pointer-events: auto; cursor: pointer; font-family: inherit; font-size: 8px; padding: 6px 8px; color: #a8f0a0; white-space: nowrap;
  background: rgba(24, 24, 40, .7); border: 2px solid rgba(255, 255, 255, .25); border-radius: 6px;
}

.chat-log li.whisper { color: #f8a8e0; }

/* Menu badge */
#menuBtn { position: fixed; }
.badge-n { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 8px; display: grid; place-items: center; border: 2px solid #fff; }

/* Friends */
.fr-frame { width: min(560px, 100%); height: min(600px, 100%); display: flex; flex-direction: column; gap: 12px; }
.fr-head { display: flex; align-items: center; gap: 12px; }
.fr-title { font-size: 15px; color: #3878e0; }
.fr-count { margin-left: auto; font-size: 9px; color: #40a048; }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; font-family: inherit; font-size: 11px; padding: 10px; border: 3px solid var(--ink); border-radius: 6px; outline: none; user-select: text; -webkit-user-select: text; }
.fr-add .btn { font-size: 10px; padding: 10px 14px; }
.fr-body { flex: 1; min-height: 0; overflow-y: auto; }
.fr-body h4 { font-size: 10px; font-weight: normal; color: #686878; margin: 12px 0 6px; }
.pill-n { background: var(--red); color: #fff; padding: 2px 6px; border-radius: 8px; font-size: 8px; }
.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fr-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #eef0f6; border-radius: 6px; font-size: 10px; }
.fr-list li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.fr-list li .lv { color: var(--red); font-size: 9px; }
.fr-list li .nm .where { display: block; margin-top: 4px; font-size: 7px; color: #5a7a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* character creator */
.creator { width: min(520px, 100%); display: flex; flex-direction: column; gap: 14px; }
.cr-title { font-size: 13px; color: #3878e0; text-align: center; }
.cr-body { display: flex; gap: 18px; align-items: center; }
#crPreview { width: 96px; height: 162px; image-rendering: pixelated; background: #cfe8b8; border: 3px solid var(--ink); border-radius: 8px; flex: none; }
.cr-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.cr-turn { display: flex; align-items: center; justify-content: space-between; width: 102px; }
.cr-arrow { font-family: inherit; font-size: 10px; width: 28px; height: 26px; padding: 0; cursor: pointer; border-radius: 6px; border: 2px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.cr-arrow:hover { background: #fff3c8; }
.cr-arrow:active { transform: translateY(2px); box-shadow: none; }
#crFacing { font-size: 6px; color: #686878; text-align: center; flex: 1; line-height: 1.4; }
.cr-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; max-height: calc(100vh - 190px); overflow-y: auto; }
.cr-row { padding: 5px 8px; border-radius: 6px; border: 2px solid transparent; }
.cr-row.sel { border-color: var(--ink); background: #fff8d8; }
.cr-row .cr-label { font-size: 8px; color: #686878; margin-bottom: 5px; display: flex; justify-content: space-between; }
.cr-row .cr-label b { font-weight: normal; color: var(--ink); }
.cr-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-sw { width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0,0,0,.35); }
.cr-sw.on { outline: 3px solid var(--ink); outline-offset: 1px; }
.cr-sw.same { position: relative; } /* "same as hair": the hair color with an = on it */
.cr-sw.same::after { content: '='; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.cr-chip { font-family: inherit; font-size: 7px; padding: 4px 5px; cursor: pointer; border-radius: 5px; border: 2px solid #c8b898; background: #fffaf0; color: #585868; }
.cr-chip.on { border-color: var(--ink); background: #f8d878; color: var(--ink); }
.cr-chip.pro { border-color: #c89818; color: #8a6410; }
.cr-chip.pro.on { border-color: var(--ink); color: var(--ink); }
.cr-note { margin: 0; font-size: 8px; line-height: 1.7; color: #686878; }
.cr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 8px; color: #686878; }
.cr-foot .btn { font-size: 10px; padding: 10px 14px; }
/* The creator always fits on screen: the title, preview and START FISHING stay put and only the list of
   choices scrolls (by finger too). 100dvh is the screen that's really visible on phones (under the browser bars). */
.creator { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-height: 0; }
.cr-body { flex: 1 1 auto; min-height: 0; }
.cr-rows { max-height: none; align-self: stretch; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cr-title, .cr-note, .cr-foot { flex: none; }
@media (max-width: 520px), (max-height: 560px) {
  .creator { gap: 8px; padding: 12px; height: min(calc(100vh - 32px), 760px); height: min(calc(100dvh - 32px), 760px); }
  .cr-body { flex-direction: column; align-items: stretch; gap: 8px; }
  .cr-stage { flex-direction: row; justify-content: center; gap: 12px; } /* a smaller preview beside its turn arrows */
  #crPreview { width: 48px; height: 81px; }
  .cr-rows { flex: 1 1 0; min-height: 120px; }
  .cr-note { display: none; } /* (the same note shows on desktop) */
  .cr-foot > span { display: none; } /* keyboard keys: no keyboard on a phone */
  .cr-foot { justify-content: center; }
  .cr-foot .btn { width: 100%; }
}
@media (min-width: 521px) and (max-height: 560px) { /* a phone held sideways: the preview goes beside the list */
  .creator { width: min(640px, 100%); }
  .cr-body { flex-direction: row; }
  .cr-stage { flex-direction: column; justify-content: flex-start; }
}
@media (min-width: 521px) and (min-height: 561px) { .cr-rows { max-height: calc(100dvh - 260px); } }
/* mailbox */
#mailList li { gap: 10px; }
#mailList li.sel { outline: 3px solid var(--ink); background: #fff8d8; }
#mailList li img { width: 40px; height: 20px; image-rendering: pixelated; object-fit: contain; }
#mailList li .mi-ico { width: 40px; text-align: center; font-size: 14px; color: #c89010; }
#mailList li .mi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#mailList li .mi-txt small { font-size: 8px; color: #686878; }
#mailList li .btn { font-size: 8px; padding: 6px 8px; }
#mailList .empty { text-align: center; color: #9898a8; background: none; }
.mail-foot { display: flex; align-items: center; gap: 12px; font-size: 8px; color: #686878; }
.mail-foot .btn { font-size: 9px; padding: 8px 12px; }
.mail-chip { color: #f8e070; }
/* daily requests */
.req-chip { color: #3878e0; }
.req-chip.all { color: #2a8a3a; }
.req-frame { width: min(500px, 100%); height: auto; max-height: min(560px, 100%); }
#reqList li { gap: 12px; align-items: center; padding: 10px 12px; }
#reqList li img, .req-bonus img { width: 48px; height: 36px; image-rendering: pixelated; object-fit: contain; flex: none; }
#reqList li .mi-txt, .req-bonus .mi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; line-height: 1.4; }
#reqList li .mi-txt small, .req-bonus .mi-txt small { font-size: 7px; color: #686878; }
#reqList li .mi-txt .rq-pay { color: #a07010; font-size: 8px; }
.rq-ico { width: 48px; height: 36px; flex: none; display: grid; place-items: center; font-size: 18px; border-radius: 6px; color: #fff; }
.rq-zone { text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.rq-pond { background: #58a8d8; } .rq-lake { background: #3888c8; } .rq-deep { background: #20508a; } .rq-sea { background: #30a8b8; } .rq-reef { background: #e87898; }
.rq-star { background: var(--rc); color: #fff; font-size: 18px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); }
.rq-bar { display: block; height: 8px; border-radius: 4px; background: #d8dce8; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); }
.rq-bar b { display: block; height: 100%; background: #3878e0; border-radius: 4px; }
#reqList li.done .rq-bar b { background: #48b048; }
.rq-n { font-size: 9px; color: #3878e0; white-space: nowrap; min-width: 52px; text-align: right; }
.rq-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.rq-swap { font-size: 8px; padding: 4px 7px; }
#reqList li.done { background: #e4f4dc; }
#reqList li.done .rq-n, .req-bonus.done .rq-n { color: #2a8a3a; }
.req-bonus { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 6px; border: 2px dashed #d8c088; background: #fffaf0; font-size: 10px; }
.req-bonus.done { border-style: solid; border-color: #8ac878; background: #e4f4dc; }
.req-bonus:empty { display: none; }
.req-frame .mail-foot { justify-content: space-between; line-height: 1.6; }
.req-frame .rq-keys { white-space: nowrap; }
/* Fishdex milestones */
.dex-rw { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: var(--paper); border: 4px solid var(--dex-dark); border-radius: 10px; font-size: 8px; }
.rw-pips { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex: none; }
.rw-pips li { position: relative; display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 3px; border-radius: 6px; background: #e8e8ee; color: #888898; border: 2px solid transparent; }
.rw-pips li img { width: 20px; height: 20px; image-rendering: pixelated; opacity: .45; filter: grayscale(.8); }
.rw-pips li.got { background: #f8d878; color: var(--ink); border-color: #c89818; }
.rw-pips li.got img { opacity: 1; filter: none; }
.rw-pips li.next { border-color: #3878e0; color: #3878e0; }
.rw-pips li.next img { opacity: .8; filter: none; }
.rw-pips li i { position: absolute; top: -6px; right: -5px; font-style: normal; font-size: 7px; background: #48b048; color: #fff; border-radius: 50%; width: 13px; height: 13px; display: grid; place-items: center; border: 2px solid #fff; }
.rw-next { flex: 1; min-width: 0; text-align: right; color: #585868; line-height: 1.5; }
.dex-list li .ssn { color: var(--sc); font-size: 11px; }
.dex-list li .ssn + .tick, .dex-list li .ssn { margin-left: auto; }
.dex-list li .ssn + .tick { margin-left: 6px; }
@media (max-width: 760px) { .dex-rw { flex-direction: column; align-items: stretch; } .rw-next { text-align: left; } .rw-pips { flex-wrap: wrap; } }
/* level milestone banner */
.milestone { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 20; pointer-events: none; text-align: center; white-space: nowrap; animation: msIn .6s cubic-bezier(.2, 1.4, .5, 1) both; }
.milestone.out { animation: msOut .6s ease-in forwards; }
.milestone .ms-small { font-size: 10px; color: #fff; letter-spacing: 2px; text-shadow: 2px 2px 0 #282030; margin-bottom: 8px; }
.milestone .ms-big { font-size: clamp(16px, 3.4vw, 30px); color: #f8d040; text-shadow: 3px 3px 0 #8a4a10, -2px -2px 0 #282030, 2px -2px 0 #282030, -2px 2px 0 #282030, 2px 2px 0 #282030, 0 0 18px rgba(248, 200, 60, .7); animation: msGlow 1.2s ease-in-out infinite; }
@keyframes msIn { from { transform: translate(-50%, -24px) scale(.6); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes msOut { to { transform: translate(-50%, -16px); opacity: 0; } }
@keyframes msGlow { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .milestone, .milestone .ms-big { animation: none !important; } }
.now-playing { color: #f8d8a0; }
.now-playing:hover { border-color: rgba(248, 216, 160, .7); }
.song-list { position: absolute; bottom: 34px; left: 0; z-index: 12; pointer-events: auto; min-width: 230px; padding: 10px; font-size: 8px; }
.song-list .sl-title { font-size: 8px; color: #686878; margin: 0 0 8px 4px; }
.song-list ul { list-style: none; margin: 0; padding: 0; }
.song-list li { padding: 7px 8px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.song-list li:hover { background: #fff3c8; }
.song-list li.on { background: #f8d878; }
.song-list li small { color: #888898; font-size: 7px; }
.song-list li.mute { color: #c84838; }
.song-list li.shuffle { border-top: 2px dashed #d8d0c0; margin-top: 4px; color: #686878; }
.now-playing.idle { display: none; }
/* online players list */
.pl-frame { width: min(440px, 100%); height: min(560px, 100%); }
#plList li { cursor: pointer; }
#plList li.sel { outline: 3px solid var(--ink); background: #fff8d8; }
#plList li .where { color: #686878; font-size: 8px; white-space: nowrap; }
#plList li .tag { font-size: 7px; padding: 2px 5px; border-radius: 4px; background: #58c858; color: #fff; }
#plList li .tag.you { background: #3878e0; }
#plList .empty { text-align: center; color: #9898a8; background: none; }
.fr-list li.off .nm, .fr-list li .offline { color: #9898a8; }
.fr-list li .offline { font-size: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #b0b0c0; flex: none; display: inline-block; }
.fr-list li.on .dot, .dot.on { background: #48c848; box-shadow: 0 0 0 2px #c8f8c0; }
.fr-empty { font-size: 9px; line-height: 2; color: #888898; }

/* Player card */
.pcard { position: fixed; z-index: 9; top: 96px; left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); }
.pc-x { position: absolute; top: 8px; right: 8px; }
.pc-name { font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pc-name .lv { color: var(--red); font-size: 10px; }
.pcard dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 9px; margin: 0; }
.pcard dt { color: #686878; }

/* Trade */
.tr-frame { width: min(900px, 100%); height: min(680px, 100%); display: flex; flex-direction: column; gap: 10px; }
.tr-head { display: flex; align-items: center; gap: 12px; }
.tr-title { font-size: 15px; color: #40a048; }
.tr-partner { font-size: 10px; color: #686878; margin-right: auto; }
.tr-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; flex: 1.1; }
.tr-side { display: flex; flex-direction: column; min-height: 0; border: 3px solid var(--ink); border-radius: 8px; padding: 8px; background: #f0f8ec; }
.tr-side.theirs { background: #eef2fc; }
.tr-frame h4 { font-size: 9px; font-weight: normal; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-chip { font-size: 7px; padding: 4px 6px; border-radius: 4px; background: #d8d8e0; color: #585868; }
.tr-chip.ready { background: #f8d030; color: var(--ink); }
.tr-chip.done { background: #48b848; color: #fff; }
.tr-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-list li { display: flex; align-items: center; gap: 8px; font-size: 9px; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .7); }
.tr-list li[data-tf] { cursor: pointer; }
.tr-list li img { width: 36px; height: 27px; flex: none; }
.tr-list li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 4px solid var(--rc, transparent); padding-left: 6px; }
.tr-list li .len { color: #888898; }
.tr-list li .val { color: #c89008; width: 54px; text-align: right; }
.tr-list li.empty { color: #9898a8; justify-content: center; padding: 14px; background: none; }
.tr-list li.chosen { background: #f8d878; box-shadow: inset 0 0 0 2px #c89818; }
.tr-list li.locked { opacity: .45; cursor: not-allowed; }
.tr-inv { flex: 1; border: 3px solid var(--ink); border-radius: 8px; padding: 6px; background: var(--paper); }
#trade.locked .tr-inv { opacity: .55; }
.tr-invh { display: flex; align-items: center; gap: 10px; font-size: 8px; color: #888898; line-height: 1.5; }
.tr-invh #trInvHint { min-width: 0; }
.tr-tabs button { white-space: nowrap; font-size: 8px; padding: 6px 10px; background: #e8e8f0; color: var(--ink); border-color: var(--ink); border-radius: 6px; }
.tr-tabs button.on { background: var(--ink); color: #fff; }
.tr-list li img.icon { width: 27px; height: 27px; padding: 0 4px; image-rendering: pixelated; }
.tr-list li .qtyc { display: flex; align-items: center; gap: 4px; }
.tr-list li .qtyc button { font-family: inherit; font-size: 8px; width: 18px; height: 18px; padding: 0; border: 2px solid var(--ink); border-radius: 4px; background: #fff; cursor: pointer; }
.tr-list li .have { color: #888898; font-size: 8px; }
.tr-list li .eqtag { font-size: 6px; background: var(--red); color: #fff; padding: 2px 4px; border-radius: 3px; }
.tr-coins { display: flex; align-items: center; gap: 8px; font-size: 10px; margin-top: 8px; color: #c89008; }
.tr-coins input { width: 110px; font-family: inherit; font-size: 10px; padding: 6px; border: 2px solid var(--ink); border-radius: 5px; user-select: text; -webkit-user-select: text; }
.tr-coins span { color: #888898; font-size: 8px; }
.tr-coins b { font-weight: normal; color: var(--ink); }
.tr-warn { background: #fff0c0; border: 2px solid #e0a010; color: #806000; font-size: 9px; padding: 8px 10px; border-radius: 6px; line-height: 1.6; }
.tr-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tr-actions .btn { font-size: 10px; padding: 10px 12px; }
.tr-help { font-size: 8px; color: #888898; margin-right: auto; line-height: 1.6; }

/* Auction House: deep teal + gold */
.ah-frame {
  width: min(980px, 100%); height: min(680px, 100%);
  background: #186068; border: 4px solid #0c3438; border-radius: 18px;
  box-shadow: inset 0 0 0 4px #f0c040, inset 0 -8px 0 #0e4248, 0 8px 0 rgba(0, 0, 0, .35);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; color: #fff;
}
.ah-head { display: flex; align-items: center; gap: 14px; }
.ah-title { font-size: 15px; color: var(--gold); text-shadow: 2px 2px 0 #0c3438; }
.ah-head .money { margin-left: auto; }
.ah-head .tabs button { background: #2c8088; color: #d0f0f0; border-color: #0c3438; }
.ah-head .tabs button.on { background: var(--paper); color: var(--ink); }
.ah-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ah-tools input, .ah-tools select { font-family: inherit; font-size: 9px; padding: 7px; border: 2px solid #0c3438; border-radius: 6px; user-select: text; -webkit-user-select: text; }
.ah-tools .note { font-size: 8px; color: #c8ecec; line-height: 1.6; }
.ah-notice { font-size: 9px; padding: 8px 10px; border-radius: 6px; line-height: 1.6; }
.ah-notice.ok { background: #d8f8d0; color: #286020; }
.ah-notice.bad { background: #fde0d8; color: #a02818; }
.ah-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; color: var(--ink); }
.ah-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; background: var(--paper); border: 4px solid #0c3438; border-radius: 10px; }
.ah-list li { display: grid; grid-template-columns: 40px minmax(90px, 1fr) 64px 64px 46px; align-items: center; gap: 6px; font-size: 9px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.ah-list li .nm { overflow-wrap: anywhere; line-height: 1.4; }
.ah-list li:nth-child(even) { background: #eef0f6; }
.ah-list li img { width: 40px; height: 30px; }
.ah-list li .nm { border-left: 4px solid var(--rc, transparent); padding-left: 6px; overflow: hidden; }
.ah-list li small { display: block; font-size: 7px; color: #888898; margin-top: 4px; }
.ah-list li .price, .ah-list li .bo { color: #c89008; text-align: right; }
.ah-list li .tl { text-align: right; color: #3878e0; font-size: 8px; }
.ah-list li.sel { background: #f8d878 !important; box-shadow: inset 0 0 0 2px #c89818; }
.ah-list li.locked { opacity: .45; cursor: not-allowed; }
.ah-list li.lk:not(.sel) { opacity: .6; } /* locked fish in the SELL tab: dimmed, but selectable so it can be unlocked */
.ah-list li.empty, .ah-list li.hdr { display: block; cursor: default; background: none !important; }
.ah-list li.empty { color: #888898; text-align: center; padding: 28px 12px; line-height: 1.8; }
.ah-list li.empty.small { padding: 6px; }
.ah-list li.hdr { font-size: 8px; color: #186068; padding: 10px 4px 4px; }
.tag { font-size: 6px; padding: 2px 4px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.tag.you { background: #3878e0; color: #fff; }
.tag.win { background: #40a048; color: #fff; }
.ah-detail { border-color: #0c3438; }
.ah-detail h3 small { font-size: 9px; color: #888898; }
.ah-bid, .ah-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ah-bid label, .ah-form label { display: flex; flex-direction: column; gap: 6px; font-size: 8px; color: #686878; }
.ah-bid input, .ah-form input, .ah-form select { font-family: inherit; font-size: 11px; padding: 8px; border: 2px solid var(--ink); border-radius: 6px; user-select: text; -webkit-user-select: text; }
.ah-bid .btn { font-size: 10px; }
.tip.win { color: #40a048; font-size: 9px; }
.hint-text { font-size: 9px; color: #888898; line-height: 2; text-align: center; margin-top: 40%; }

/* Dialog */
.dialog {
  position: fixed; z-index: 8; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px)); min-height: 100px; cursor: pointer;
}
.dialog p { margin: 0; font-size: 14px; line-height: 2; white-space: pre-line; }
.dialog .arrow { position: absolute; right: 18px; bottom: 12px; color: var(--red); font-size: 12px; opacity: 0; }
.dialog.done .arrow { animation: bob .6s steps(2) infinite; opacity: 1; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* Menu */
.menu { position: fixed; z-index: 9; top: 12px; right: 12px; min-width: 210px; padding: 14px 12px; }
.menu.center { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { font-size: 13px; padding: 10px 8px 10px 28px; cursor: pointer; position: relative; }
.menu li.sel::before, .menu li:hover::before { content: '▶'; position: absolute; left: 6px; color: var(--ink); }

/* Minigame */
.mg { position: fixed; z-index: 7; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); }
.mg-label { font-size: 12px; margin-bottom: 14px; text-align: center; }
.mg-track { position: relative; height: 36px; background: #2860a8; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.mg-zone { position: absolute; top: 0; bottom: 0; background: rgba(120, 220, 110, .55); border-left: 3px solid #b8f8a8; border-right: 3px solid #b8f8a8; }
.mg.hit .mg-zone { background: rgba(140, 240, 120, .8); }
.mg-fish { position: absolute; top: 50%; width: 40px; height: 30px; transform: translate(-50%, -50%); }
.mg-prog { height: 12px; margin-top: 12px; background: #c8c8d0; border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.mg-prog div { height: 100%; width: 30%; background: linear-gradient(90deg, #f8b030, #f8e048); }
.mg-help { font-size: 8px; margin-top: 12px; text-align: center; color: #686878; line-height: 1.6; }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 24, .55); padding: 16px; }

/* Catch card */
.card { position: relative; width: min(380px, calc(100vw - 32px)); text-align: center; padding: 28px 22px 22px; cursor: pointer; animation: pop .55s cubic-bezier(.2, 1.35, .45, 1) both; }
@keyframes pop { from { transform: translateY(24px) scale(.82); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
/* catch card: the backdrop fades in, the card springs up, then the fish swims in and the details rise in turn */
#catchWrap:not(.hidden) { animation: catchFade .3s ease-out both; }
@keyframes catchFade { from { background-color: transparent; } }
.card .big img { animation: fishIn .7s .15s cubic-bezier(.25, 1.25, .5, 1) both, fishBob 2.6s 1s ease-in-out infinite; }
@keyframes fishIn { from { transform: translateX(-30px) rotate(-8deg) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fishBob { 50% { transform: translateY(-4px) rotate(1deg); } }
.card > h2, .card > .stats, .card > .badge, .card > .reward, .card > .lvup { animation: riseIn .45s ease-out both; }
.card > h2 { animation-delay: .3s; } .card > .stats { animation-delay: .38s; } .card > .badge { animation-delay: .46s; } .card > .reward { animation-delay: .54s; }
@keyframes riseIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.card .ribbon { animation: ribbonIn .4s .2s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes ribbonIn { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .card, .card *, #catchWrap { animation: none !important; } }
.card .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--rc); color: #fff; font-size: 10px; padding: 8px 14px; border: 3px solid var(--ink); border-radius: 6px; white-space: nowrap; }
.card .new { position: absolute; top: 14px; right: 14px; color: #fff; background: var(--red); font-size: 9px; padding: 6px 8px; border-radius: 4px; animation: bob .5s steps(2) infinite; }
.card .big { margin: 10px auto 8px; width: 256px; max-width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(circle, #d8ecff 0 45%, transparent 46%); }
.card .big img { width: 100%; height: auto; }
.card h2 { font-size: 18px; margin: 8px 0 14px; letter-spacing: 1px; }
.card .stats, .card .reward { display: flex; justify-content: center; gap: 18px; font-size: 11px; margin: 8px 0; }
.card .coin { color: #c89008; }
.card .xp { color: #3878e0; }
.card .lvup { margin-top: 12px; font-size: 12px; color: var(--red); animation: bob .5s steps(2) infinite; }
.card .press { margin-top: 12px; color: var(--red); font-size: 12px; animation: bob .6s steps(2) infinite; visibility: hidden; }
#catchCard.ready .card .press { visibility: visible; } /* shows once the card can be closed */
.card.glimmer { background: linear-gradient(135deg, #fff 0%, #fff8d8 40%, #e8f0ff 60%, #fff 100%); }
.card.glimmer .big { animation: sparkle 1.6s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { filter: drop-shadow(0 0 0 #fff8a0); } 50% { filter: drop-shadow(0 0 8px #fff070); } }
/* Foil trading-card look that builds up with rarity: matte common, tinted uncommon, a foil sweep on rare,
   a rainbow holo on epic and shifting gold foil on legendary. The .foil layer sits over the whole card. */
.card .foil { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 4; overflow: hidden; }
.card .rank { position: absolute; top: 14px; left: 14px; font-size: 8px; color: var(--rc); }
.card.r-uncommon { background: linear-gradient(180deg, #f8f8f8 55%, #e4f4de); }
.card.r-rare { background: linear-gradient(180deg, #f8f8f8 45%, #dae6fc); border-color: #1c3c78; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--rc), 0 4px 0 rgba(0, 0, 0, .35); }
.card.r-rare .foil::before { content: ''; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .85) 48%, rgba(170, 210, 255, .6) 52%, transparent 58%); animation: foilSweep 3.6s .6s ease-in-out infinite; }
@keyframes foilSweep { 0% { transform: translateX(-60%); } 50%, 100% { transform: translateX(60%); } }
.card.r-epic { background: linear-gradient(180deg, #faf6ff 40%, #e6d6fa); border-color: #3c1860; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--rc), 0 4px 0 rgba(0, 0, 0, .35); }
.card.r-epic .foil { mix-blend-mode: soft-light; opacity: .85; background: linear-gradient(125deg, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7cf8c8, #f8e870, #ff6ad5); background-size: 300% 300%; animation: holo 4s linear infinite; }
@keyframes holo { to { background-position: 300% 300%; } }
.card.r-legendary {
  background: linear-gradient(135deg, #fff6d0, #f8d868 30%, #fff2b8 50%, #f0b840 70%, #fff6d0); background-size: 250% 250%;
  animation: pop .55s cubic-bezier(.2, 1.35, .45, 1) both, holo 5s linear infinite;
  border-color: #6a3a08; box-shadow: inset 0 0 0 3px #fff8d8, inset 0 0 0 7px #c87808, 0 0 0 3px #f8d030, 0 0 24px rgba(248, 176, 48, .7), 0 4px 0 rgba(0, 0, 0, .35);
}
.card.r-legendary .foil { mix-blend-mode: overlay; background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, .9) 45%, rgba(255, 230, 140, .6) 50%, transparent 65%); background-size: 300% 100%; animation: holo 3s linear infinite; }
.card.r-legendary h2 { color: #8a4a00; text-shadow: 2px 2px 0 #fff4c0; }
.card.r-legendary .big { background: radial-gradient(circle, #fffbe8 0 45%, transparent 46%); }

/* Fishdex */
.dex-frame {
  width: min(920px, 100%); height: min(620px, 100%);
  background: var(--dex); border: 4px solid var(--dex-dark); border-radius: 18px;
  box-shadow: inset 0 -6px 0 var(--dex-dark), 0 8px 0 rgba(0, 0, 0, .35);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.dex-head { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 12px; }
.dex-head .dex-title { font-size: 16px; text-shadow: 2px 2px 0 var(--dex-dark); }
.dex-head #dexCount { margin-left: auto; font-size: 10px; }
.lights { display: flex; gap: 6px; }
.lights i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dex-dark); background: #f8f8f8; }
.lights i:nth-child(1) { background: #58c8f8; width: 22px; height: 22px; }
.lights i:nth-child(2) { background: #f8e048; }
.lights i:nth-child(3) { background: #68d868; }
.dex-x { background: none; border: 0; color: #fff; font-size: 14px; cursor: pointer; padding: 4px 6px; }
.dex-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
.dex-detail {
  background: var(--screen); border: 4px solid var(--dex-dark); border-radius: 10px;
  padding: 16px; overflow: auto; box-shadow: inset 0 0 0 3px #c8dcb8;
}
.dd-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.rar { background: var(--rc); color: #fff; padding: 6px 8px; border-radius: 4px; font-size: 9px; }
.tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rar.glim-tag { background: linear-gradient(90deg, #f8d850, #f8a8e0, #a8d8f8); color: #4a3060; }
.card .ribbon.glim-ribbon { top: auto; bottom: -14px; background: linear-gradient(90deg, #f8d850, #f8a8e0, #a8d8f8); color: #4a3060; }
.dd-img { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; background: repeating-linear-gradient(0deg, #d8ecc8 0 4px, #e0f0d0 4px 8px); border-radius: 8px; padding: 10px; }
.dd-img img { width: min(224px, 70%); height: auto; }
.dd-img img.glim-img { width: min(96px, 26%); }
.dex-detail h3 { font-size: 16px; margin: 6px 0 12px; }
/* fish names (and ????? for ones not caught yet) in their rarity color: the Fishdex and the RECORDS board */
.rc { color: var(--rc); text-shadow: 1px 1px 0 rgba(255, 255, 255, .55); }
.dex-detail .desc { font-size: 10px; line-height: 2; margin: 0 0 12px; }
.dex-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 9px; margin: 0; }
.dex-detail dt { color: #688058; }
.dex-detail .glim { margin-top: 12px; font-size: 9px; color: #c08000; }
.dex-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; background: var(--paper); border: 4px solid var(--dex-dark); border-radius: 10px; }
.dex-list li { display: flex; align-items: center; gap: 10px; font-size: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.dex-list li img { width: 40px; height: 30px; }
.dex-list li .num { color: #888898; }
.dex-list li .tick { margin-left: auto; color: var(--red); font-size: 8px; }
.dex-list li.sel { background: #f8d878; box-shadow: inset 0 0 0 2px #c89818; }
.dex-list li:not(.got) .nm { color: var(--rc, #a0a0b0); } /* ????? in the fish's rarity color */
.dex-tabs { display: flex; gap: 8px; }
.dex-tabs button { flex: 1; font-family: inherit; font-size: 10px; padding: 8px 10px; border-radius: 8px; border: 4px solid var(--dex-dark); background: var(--paper); color: var(--ink); cursor: pointer; }
.dex-tabs button span { color: #686878; margin-left: 6px; font-size: 9px; }
.dex-tabs button.on { background: #f8d878; }
.dex-tabs button:not(.on):hover { background: #fff3c8; }
.dex-list li.dex-sep { cursor: default; font-size: 8px; color: var(--rc); letter-spacing: 1px; padding: 10px 8px 4px; border-bottom: 2px solid var(--rc); border-radius: 0; margin-bottom: 4px; }
.dex-foot { color: #fff; font-size: 8px; text-align: center; opacity: .85; }

/* Shared bits for bag + shop */
.chip {
  font-family: inherit; font-size: 8px; padding: 7px 8px; cursor: pointer;
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 6px;
}
.chip.on { background: var(--ink); color: #fff; }
.chip.sell { background: var(--red); color: #fff; }
.chip:disabled, .btn:disabled { opacity: .45; cursor: default; }
.money { font-size: 11px; }
.money b { font-weight: normal; }
.grow { flex: 1; }
img.icon { width: 32px; height: 32px; }
.stats { list-style: none; padding: 0; margin: 0 0 12px; font-size: 9px; line-height: 2; color: #3878e0; }
.stats li::before { content: '▸ '; color: var(--ink); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.actions .btn { font-size: 10px; padding: 10px 12px; }
.tip { font-size: 8px; color: #8a7a60; line-height: 1.8; margin: 12px 0 0; }

/* Bag: canvas satchel look */
.bag-frame {
  width: min(920px, 100%); height: min(620px, 100%);
  background: #c88848; border: 4px solid #6c4018; border-radius: 18px;
  box-shadow: inset 0 0 0 4px #e0a868, inset 0 -8px 0 #8c5828, 0 8px 0 rgba(0, 0, 0, .35);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.bag-head { display: flex; align-items: center; gap: 14px; color: #fff; flex-wrap: wrap; }
.bag-tabs { flex-wrap: wrap; gap: 4px; }
.bag-tabs button { font-size: 8px; padding: 7px 8px; }
.bag-title { font-size: 16px; text-shadow: 2px 2px 0 #6c4018; }
.bag-head .money { margin-left: auto; text-shadow: 2px 2px 0 #6c4018; }
.tabs { display: flex; gap: 6px; }
.tabs button { font-family: inherit; font-size: 10px; padding: 8px 12px; cursor: pointer; background: #e8c090; color: #6c4018; border: 3px solid #6c4018; border-radius: 8px 8px 4px 4px; }
.tabs button.on { background: var(--paper); color: var(--ink); }
.bag-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bag-tools .count { font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #6c4018; }
.bag-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.bag-list, .shop-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; background: var(--paper); border: 4px solid #6c4018; border-radius: 10px; }
.bag-list li, .shop-list li { display: flex; align-items: center; gap: 8px; font-size: 9px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.bag-list li img { width: 40px; height: 30px; flex: none; }
.bag-list li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 4px solid var(--rc, transparent); padding-left: 6px; }
.bag-list li .len { color: #888898; width: 56px; text-align: right; }
.bag-list li .val { color: #c89008; width: 56px; text-align: right; }
.bag-list li .lock { width: 16px; font-size: 10px; }
.bag-list li .eq { color: var(--red); font-size: 8px; margin-left: auto; }
.bag-list li.sel, .shop-list li.sel { background: #f8d878; box-shadow: inset 0 0 0 2px #c89818; }
.bag-list li.empty { color: #888898; cursor: default; justify-content: center; padding: 24px; line-height: 1.8; }
.check { width: 14px; height: 14px; flex: none; border: 2px solid var(--ink); border-radius: 3px; background: #fff; }
.check.on { background: var(--red); box-shadow: inset 0 0 0 2px #fff; }
.check.dis { opacity: .3; }
.bag-detail, .shop-detail {
  background: var(--paper); border: 4px solid #6c4018; border-radius: 10px; padding: 16px; overflow: auto;
}
.bag-detail .fid { font-size: 8px; color: #888898; }
.bd-img { display: grid; place-items: center; margin: 12px 0; background: repeating-linear-gradient(0deg, #f0e4d0 0 4px, #f8ecd8 4px 8px); border-radius: 8px; padding: 12px; }
.bd-img img { width: min(224px, 72%); height: auto; }
.bd-img img.icon { width: 96px; height: 96px; }
.bag-detail h3, .shop-detail h3 { font-size: 15px; margin: 6px 0 12px; }
.bag-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 9px; margin: 0; }
.bag-detail dt { color: #8a7a60; }
.bag-detail .coin { color: #c89008; }
.trophy { background: var(--gold); color: var(--ink); font-weight: normal; font-size: 7px; padding: 3px 4px; border-radius: 3px; margin-left: 4px; }
.desc { font-size: 10px; line-height: 2; margin: 0 0 12px; }

/* Shop: classic white mart window */
.shop-frame { width: min(820px, 100%); height: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.shop-head { display: flex; align-items: center; gap: 14px; }
.shop-title { font-size: 15px; color: var(--red); }
.shop-head .money { margin-left: auto; }
.shop-tabs { flex-wrap: wrap; margin: 2px 0 -6px; }
.shop-tabs button { font-size: 9px; padding: 7px 10px; }
.dex-x.dark { color: var(--ink); }
.shop-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; }
.shop-list, .shop-detail { border-color: var(--ink); border-width: 3px; }
.shop-list li { font-size: 10px; padding: 8px; }
.shop-list li .nm { flex: 1; }
.shop-list li .price { color: #c89008; }
.shop-list li.locked { opacity: .5; }
.shop-detail .bd-img { background: repeating-linear-gradient(0deg, #e0ecf8 0 4px, #e8f2fc 4px 8px); }
.shop-detail .have { font-size: 9px; color: #686878; margin-bottom: 10px; }
.qty { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.qty span { font-size: 12px; min-width: 48px; text-align: center; }
.total { font-size: 12px; margin: 6px 0 12px; }
.buy { width: 100%; font-size: 12px; }
.shop-foot { font-size: 8px; text-align: center; color: #686878; }

/* Leaderboards: navy + gold trophy frame */
.lb-frame {
  width: min(760px, 100%); height: min(640px, 100%);
  background: #c88848; border: 4px solid #6c4018; border-radius: 18px; /* the bag's orange theme */
  box-shadow: inset 0 0 0 4px #e0a868, inset 0 -8px 0 #8c5828, 0 8px 0 rgba(0, 0, 0, .35);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; color: #fff;
}
.lb-head { display: flex; align-items: center; }
.lb-title { flex: 1; text-align: center; font-size: 18px; color: #fff3b8; text-shadow: 3px 3px 0 #6c4018; }
.lb-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lb-coin { color: #d8a010; margin-right: 4px; }
.lb-tabs button { font-family: inherit; font-size: 9px; padding: 10px 4px; cursor: pointer; background: #e8c090; color: #6c4018; border: 3px solid #6c4018; border-radius: 8px; }
.lb-tabs button.on { background: var(--paper); color: var(--ink); }
.lb-period { display: flex; gap: 6px; align-items: center; }
.lb-period .note { font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #6c4018; margin-left: 6px; }
.lb-period .chip.on { background: #6c4018; border-color: #6c4018; }
.lb-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--paper); color: var(--ink); border: 4px solid #6c4018; border-radius: 10px; padding: 6px; }
.lb-empty { font-size: 10px; color: #888898; text-align: center; padding: 48px 16px; line-height: 2; }
.lb-rows { list-style: none; margin: 0; padding: 0; }
.lb-rows li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; font-size: 11px; border-radius: 6px; }
.lb-rows li:nth-child(even) { background: #f8ecd8; }
.lb-rows .rk { width: 36px; text-align: center; color: #888898; }
.lb-rows .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rows .val small, .lb-foot small { font-size: 8px; color: #888898; }
.lb-rows li.me { background: #f8d878 !important; box-shadow: inset 0 0 0 2px #c89818; }
.medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 10px; color: #fff; border: 2px solid rgba(0, 0, 0, .35); text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); }
.medal.m1 { background: #f0b818; }
.medal.m2 { background: #a8b0c0; }
.medal.m3 { background: #c87838; }
.lb-rows li.top1 .nm { color: #b07800; }
/* MOST CAUGHT: click a name for that angler's catches by rarity */
.lb-expand { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; }
.lb-expand .caret { font-size: 7px; color: #b8601c; width: 8px; }
.lb-expand:hover .lb-name:not(.colored) { color: #b8601c; }
.lb-expand:focus-visible { outline: 2px dashed #6c4018; outline-offset: 2px; }
.lb-rows li.open { flex-wrap: wrap; row-gap: 8px; }
.lb-rarity { flex-basis: calc(100% - 48px); box-sizing: border-box; padding: 8px 10px; background: #fff8e8; border: 2px dashed #e0a868; border-radius: 6px; margin-left: 48px; }
.lb-rarity-load { font-size: 9px; color: #888898; }
.lb-rarity-grid { display: grid; gap: 5px; }
.lb-rarity-grid .rr { display: grid; grid-template-columns: 92px 52px 1fr 44px; align-items: center; gap: 8px; font-size: 9px; }
.lb-rarity-grid .rr-lbl { color: var(--rc); text-shadow: 1px 1px 0 rgba(0, 0, 0, .12); }
.lb-rarity-grid .rr-n { text-align: right; }
.lb-rarity-grid .rr-bar { height: 8px; background: #ecdcc0; border: 2px solid #6c4018; border-radius: 3px; overflow: hidden; }
.lb-rarity-grid .rr-bar i { display: block; height: 100%; background: var(--rc); }
.lb-rarity-grid .rr-pct { text-align: right; color: #686878; }
.lb-rarity-grid .rr.none { opacity: .45; }
@media (max-width: 560px) { .lb-rarity { margin-left: 0; flex-basis: 100%; } .lb-rarity-grid .rr { grid-template-columns: 74px 40px 1fr 38px; gap: 6px; font-size: 8px; } }
.lb-records { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.lb-records li { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-items: center; padding: 6px 8px; border-radius: 6px; background: #f8ecd8; font-size: 9px; }
.lb-records li img { width: 44px; height: 33px; grid-row: span 2; }
.lb-records .sp { grid-column: 2 / 4; }
.lb-records .len { color: #b8601c; }
.lb-records .who { color: #686878; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-records .none { color: #b0b0c0; }
.lb-records li.me { background: #f8d878; }
.lb-foot { font-size: 10px; text-align: center; padding: 4px; text-shadow: 1px 1px 0 #6c4018; }
.lb-foot b { color: #fff3b8; font-weight: normal; }

/* Catch card badges */
.card .badge { display: inline-block; margin: 4px 0 6px; font-size: 9px; padding: 6px 10px; border-radius: 4px; }
.card .badge.rec { background: var(--gold); color: #182858; border: 2px solid #c89010; animation: bob .5s steps(2) infinite; }
.card .badge.perfect { background: linear-gradient(90deg, #f8d030, #f09838); color: #382818; border: 2px solid #c89010; }
.card .badge.festival { background: #d8402a; color: #fff4d8; border: 2px solid #7a2412; }
.card .badge.frenzy { background: #2a90d8; color: #f0f8ff; border: 2px solid #124a7a; }
.card .badge.hotspot { background: #f0a030; color: #fff8e8; border: 2px solid #8a4a10; }
.cal-day .fest { position: absolute; right: 4px; top: 3px; font-size: 9px; color: #d8402a; text-shadow: 0 0 4px rgba(255,140,60,.8); }
.fest-row span:first-child { color: #d8402a; }
.hud .fest { color: #d8402a; }
/* server-record fish in the bag */
#bagList li.rec { background: linear-gradient(90deg, rgba(248,208,48,.28), rgba(248,208,48,.06)); box-shadow: inset 3px 0 0 #e8b020; }
#bagList li.rec.old { background: linear-gradient(90deg, rgba(200,200,210,.3), transparent); box-shadow: inset 3px 0 0 #a8a8b8; }
#bagList .rec-star { font-weight: normal; color: #d89810; margin-right: 3px; }
#bagList li.held { background: linear-gradient(90deg, rgba(232,64,64,.32), rgba(232,64,64,.08)); box-shadow: inset 3px 0 0 #d83838; }
#bagList li.held .nm::after { content: " · HELD"; color: #c82828; font-size: 7px; }
#bagList li.rec.old .rec-star { color: #9898a8; }
.rec-badge { text-align: center; font-size: 8px; padding: 5px; margin: 4px 0; border-radius: 5px; color: #6a4808; background: #f8d860; border: 2px solid #c89010; }
.rec-badge.old { color: #585868; background: #e0e0e8; border-color: #a8a8b8; }
.card .badge.pb { background: #3878e0; color: #fff; }

/* HUD date + Calendar */
.hud .date { margin-top: 4px; font-size: 8px; color: #686878; justify-content: flex-start; gap: 6px; }
.hud .date .se { font-weight: bold; }
.cal { width: min(620px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 24px); overflow: auto; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 7px; color: #686878; }
.cal-legend span b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -2px; margin-right: 4px; }
.cal-grid { display: grid; grid-template-columns: 22px repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid .wd { font-size: 7px; color: #888898; text-align: center; padding-bottom: 2px; }
.cal-grid .season { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 7px; color: #fff; border-radius: 4px;
  display: grid; place-items: center; letter-spacing: .05em; }
.cal-day { position: relative; aspect-ratio: 1 / 1.05; min-height: 48px; border-radius: 6px; background: var(--sc-bg); box-shadow: inset 0 0 0 2px var(--sc);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 2px; cursor: pointer; }
.cal-day .n { align-self: flex-start; font-size: 7px; color: #484858; }
.cal-day .m { position: absolute; top: 3px; right: 3px; font-size: 5px; color: #fff; background: var(--sc); padding: 1px 2px; border-radius: 2px; }
.cal-day .big { font-size: 16px; line-height: 1; }
.cal-day .sp { display: flex; gap: 1px; font-size: 7px; line-height: 1; opacity: .8; }
.cal-day.past { opacity: .4; }
.cal-day.today { box-shadow: inset 0 0 0 3px var(--red); }
.cal-day.today::after { content: 'TODAY'; position: absolute; bottom: -5px; font-size: 5px; background: var(--red); color: #fff; padding: 1px 3px; border-radius: 3px; }
.cal-day.sel { outline: 3px solid #f8d878; outline-offset: 1px; }
.cal-detail { font-size: 8px; line-height: 1.9; color: #484858; min-height: 72px; background: #f4f4f8; border-radius: 8px; padding: 8px 10px; }
.cal-detail h4 { margin: 0 0 4px; font-size: 9px; color: #282030; }
.cal-detail .row { display: grid; grid-template-columns: 76px 74px 1fr; gap: 6px; }
.cal-detail .row .now { color: var(--red); }
.w-clear { color: #e8a010; } .w-cloudy { color: #8890a0; } .w-rain { color: #3878e0; } .w-storm { color: #7048c8; } .w-fog { color: #9aa4b4; } .w-snow { color: #58a8e8; }

/* Wardrobe */
.hud { cursor: pointer; }
.hud:hover { box-shadow: 0 0 0 3px #f8d878, 0 4px 0 rgba(0,0,0,.25); }
.wd-stage { display: grid; place-items: center; height: 170px; border-radius: 8px; background: #78c850;
  background-image: radial-gradient(#58a838 1px, transparent 1px); background-size: 8px 8px; box-shadow: inset 0 0 0 3px #58a838; }
.wd-stage canvas { width: 80px; height: 135px; image-rendering: pixelated; }
.wd-turn { width: 100%; margin-top: 8px; }
.wd-facing { font-family: inherit; font-size: 6px; color: #686878; flex: 1; line-height: 1.4; background: none; border: 0; padding: 4px 2px; cursor: pointer; }
.wd-info { margin-top: 10px; font-size: 8px; line-height: 1.9; color: #484858; }
.wd-info .nm { font-size: 11px; color: #282030; }
.wd-info .lv { color: var(--red); }
/* ---- the wardrobe: laid out like the Fishdex, in plum (categories on top, you + the chosen item left, the list right) */
.wd-frame { --dex: #8a5ab0; --dex-dark: #4e2a6e; --screen: #f6eefc; width: min(860px, 100%); }
.wd-count { margin-left: auto; font-size: 10px; }
.wd-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 8px; background: var(--paper); border: 4px solid var(--dex-dark); border-radius: 10px; }
.wd-tabs button { font-family: inherit; font-size: 8px; padding: 6px 9px; border-radius: 6px; border: 2px solid #d0d0d8; background: #f0f0f4; color: #585868; cursor: pointer; }
.wd-tabs button.shop { color: #a07010; border-color: #ecd8a0; background: #fffaf0; }
.wd-tabs button.on { background: #f8d878; border-color: #c89818; color: var(--ink); }
.wd-tabs button:not(.on):hover { background: #fff3c8; }
.wd-main { grid-template-columns: 1fr 1fr; }
.wd-detail { display: flex; flex-direction: column; gap: 12px; }
.wd-top { display: flex; gap: 14px; align-items: flex-start; }
.wd-me { width: 150px; flex: none; }
.wd-top .wd-info { margin-top: 0; }
.wd-sel { border-top: 2px dashed #d8c8e8; padding-top: 10px; }
.wd-sel h3 { font-size: 14px; margin: 8px 0 8px; }
.wd-sel .desc { font-size: 9px; line-height: 1.9; margin: 0 0 12px; color: #484858; }
.wd-sel .btn { width: 100%; }
.wd-cat { font-size: 9px; color: #8a5ab0; }
/* the Token Shop preview at the top of the chosen item (like the shop's cards, twice the size) */
.wd-pv { position: relative; width: 100%; aspect-ratio: 88 / 34; border-radius: 6px; overflow: hidden; border: 2px solid #d8d0e8; margin-bottom: 10px; }
.wd-detail.styling .wd-top { display: none; }
.wd-detail.styling .wd-sel { border-top: 0; padding-top: 0; }
.wd-pv canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.wd-pv .pv-name { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); font-size: 10px; padding: 4px 6px; background: rgba(24, 24, 40, 0.7); white-space: nowrap; }
.wd-pv .pv-bubble { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); font-size: 9px; padding: 5px 7px; border-radius: 6px; background: var(--bf); border: 2px solid var(--bo); white-space: nowrap; opacity: .95; }
.wd-pv .pv-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--bo); border-bottom: 0; }
.wd-list li .nm { flex: 1; min-width: 0; }
.wd-list li.shop .nm { color: #8a5a10; }
.wd-star { color: #c89010; font-size: 10px; }
.wd-worn { color: #2a8a3a; font-size: 8px; white-space: nowrap; }
.wd-list li.worn { background: #eef8ea; }
.wd-list li.worn.sel { background: #f8d878; }
.wd-ico { width: 40px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #f0f0f4; box-shadow: inset 0 0 0 2px #d8d8e0; font-size: 7px; color: #888898; }
.wd-list li.shop .wd-ico { box-shadow: inset 0 0 0 2px #e0b030; background: #fff8e0; }
img.wd-ico { object-fit: contain; image-rendering: pixelated; padding: 3px; }
img.wd-ico.hat { object-fit: cover; object-position: top; }
.wd-ico .sw { width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); }
.wd-ico .nc { font-size: 11px; text-shadow: 1px 1px 0 #202030; }
.wd-ico .gl { font-size: 15px; color: #8a4a90; }
.wd-ico .bb { width: 20px; height: 13px; border-radius: 5px; background: var(--bf); border: 2px solid var(--bo); }

/* Options */
.opts { width: min(440px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 14px; }
.opts-head { display: flex; align-items: center; }
.opts-title { flex: 1; font-size: 14px; color: #3878e0; }
.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt-list.muted { opacity: .45; }
.opt-row { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; font-size: 10px; }
.opt-row.sel { background: #f8d878; box-shadow: inset 0 0 0 2px #c89818; }
.opt-row .val { text-align: right; font-size: 9px; color: #686878; }
.opt-check { display: flex; gap: 10px; cursor: pointer; }
.opt-check input { width: 18px; height: 18px; accent-color: var(--red); }
.hint-key { margin-left: auto; font-size: 8px; color: #888898; border: 2px solid #c8c8d0; border-radius: 4px; padding: 3px 5px; }
.opts-foot { display: flex; align-items: center; gap: 10px; font-size: 7px; color: #888898; }
.opts-foot span { margin-left: auto; }
/* chunky pixel slider */
.opt-row input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 14px; cursor: pointer; background: transparent;
}
.opt-row input[type=range]::-webkit-slider-runnable-track {
  height: 10px; border: 3px solid var(--ink); border-radius: 4px;
  background: linear-gradient(90deg, #48a8f0 var(--p, 50%), #d8d8e0 var(--p, 50%));
}
.opt-row input[type=range]::-moz-range-track { height: 10px; border: 3px solid var(--ink); border-radius: 4px; background: #d8d8e0; }
.opt-row input[type=range]::-moz-range-progress { height: 10px; background: #48a8f0; }
.opt-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 20px; margin-top: -8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 3px;
}
.opt-row input[type=range]::-moz-range-thumb { width: 10px; height: 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 3px; }

/* Confirm */
.confirm-wrap { z-index: 12; }
.confirm { width: min(460px, calc(100vw - 32px)); }
.confirm p { font-size: 12px; line-height: 2; margin: 0 0 16px; white-space: pre-line; }
.yn { display: flex; gap: 10px; justify-content: flex-end; }
.yn .btn { min-width: 90px; }
.yn .btn.sel { background: var(--ink); color: #fff; }

/* Title */
.title {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 16px;
  justify-content: safe center; overflow-y: auto; /* short screens (phones on their side): scrolls, and the top never gets cut off */
  background: linear-gradient(180deg, rgba(8, 12, 40, .6) 0%, rgba(14, 18, 52, .22) 45%, rgba(6, 8, 20, .3) 100%); /* night sky over Lantern Lake */
}
.logo { text-align: center; }
.logo-main { /* one line, lantern glow: warm gold letters, dark ember outline, soft orange halo */
  font-size: clamp(18px, 5.6vw, 54px); line-height: 1.15; color: #ffd47a; letter-spacing: 3px; white-space: nowrap;
  text-shadow: 4px 0 0 #6a2e0c, -4px 0 0 #6a2e0c, 0 4px 0 #6a2e0c, 0 -4px 0 #6a2e0c,
    4px 4px 0 #6a2e0c, -4px 4px 0 #6a2e0c, 4px -4px 0 #6a2e0c, -4px -4px 0 #6a2e0c, 0 10px 0 #3a1806,
    0 0 22px rgba(255, 170, 60, .85), 0 0 46px rgba(255, 140, 40, .55);
  animation: float 2.4s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-6px); } }
.logo-sub { margin-top: 18px; font-size: clamp(8px, 2vw, 12px); color: #fff4d8; text-shadow: 2px 2px 0 #6a2e0c, 0 0 10px rgba(255, 170, 60, .6); }
.login { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.login label { display: flex; flex-direction: column; gap: 8px; font-size: 10px; }
.login input {
  font-family: inherit; font-size: 13px; padding: 10px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink);
  outline: none; user-select: text; -webkit-user-select: text;
}
.login input:focus { border-color: #3878e0; }
.login .row { display: flex; gap: 10px; }
.login .row .btn { flex: 1; font-size: 11px; }
.login.busy { opacity: .6; pointer-events: none; }
.err { color: var(--red); font-size: 9px; min-height: 9px; line-height: 1.5; }
.reg-extra { display: flex; flex-direction: column; gap: inherit; }
.reg-extra.hidden { display: none; }
.reg-note { margin: 0; font-size: 8px; line-height: 1.7; color: #3878e0; }
.legal-links { margin-top: 14px; font-size: 8px; color: #fff4d8; text-shadow: 1px 1px 0 #6a2e0c; text-align: center; }
.legal-links a { color: #fff4d8; }
.legal-links a:hover { color: #ffffff; }
.forgot { display: flex; justify-content: center; gap: 8px; font-size: 8px; color: #686878; }
.linkbtn { font: inherit; font-size: 8px; color: #3878e0; background: none; border: 0; padding: 2px; cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: #2858b0; }
.login textarea { font-family: inherit; font-size: 11px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink);
  outline: none; resize: none; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.login textarea:focus { border-color: #3878e0; }
.rec-opt { color: #686878; font-size: 8px; }
.rec-secret { display: inline-block; margin: 6px 0; padding: 6px 10px; background: #fff; border: 2px dashed #3878e0; border-radius: 6px; font-size: 12px; color: var(--ink); user-select: all; -webkit-user-select: all; }
.controls { font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #183018; text-align: center; line-height: 1.8; }

@media (max-width: 700px) {
  .dex-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .dex-detail { max-height: 46vh; }
  .wd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wd-tabs button { flex: none; }
  /* phones: the chosen item sits beside you (stats are in the corner box anyway), so WEAR stays in view */
  .wd-detail { flex-direction: row; gap: 12px; align-items: flex-start; }
  .wd-top .wd-info, .wd-count { display: none; }
  .wd-me { width: 112px; }
  .wd-facing { display: none; } /* just the two arrows */
  .wd-sel { border-top: 0; padding-top: 0; flex: 1; min-width: 0; }
  .wd-sel h3 { font-size: 11px; margin: 6px 0; }
  .wd-sel .desc { font-size: 8px; line-height: 1.7; margin-bottom: 8px; }
  .bag-body, .shop-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .bag-detail, .shop-detail { max-height: 40vh; }
  .lb-records { grid-template-columns: 1fr; }
  .tr-offers { grid-template-columns: 1fr; }
  .ah-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .ah-detail { max-height: 42vh; }
  .ah-list li { grid-template-columns: 36px 1fr 64px 48px; }
  .ah-list li .bo { display: none; }
  .lb-tabs button { font-size: 7px; }
  .hud { min-width: 150px; font-size: 9px; }
  .dialog p { font-size: 11px; }
  .hint { top: auto; bottom: 130px; }
}

/* Small HUD buttons (chat, online count, mail, song, menu, FPS) wear the same white double-frame box as
   the player info panel in the top left. */
.chat-hint, .chat-online, #menuBtn.pill.btn, .pill.fps {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--frame), 0 3px 0 rgba(0, 0, 0, .35);
  padding: 9px 11px;
}
.chat-hint:hover, .chat-online:hover, #menuBtn.pill.btn:hover { background: #fff8d8; }
.chat-hint:active, .chat-online:active, #menuBtn.pill.btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--frame), 0 1px 0 rgba(0, 0, 0, .35); }
.chat-online { color: #2a8a3a; }
.mail-chip { color: #a87800; }
.now-playing { color: #8a4a90; }
.now-playing:hover { border-color: var(--ink); }
.pill.fps { color: #2a8a3a; }
.pill.fps.mid { color: #a87800; }
.pill.fps.low { color: #c83828; }

/* ---- Token Shop */
/* laid out like the wardrobe and the Fish Catalog, in lantern orange: a device frame, tabs on top, one screen */
.ts-frame { --dex: #e8792a; --dex-dark: #8a3a0e; --screen: #fff6ec; width: min(800px, 100%); height: min(620px, 100%); }
.ts-frame .dex-title { white-space: nowrap; }
.ts-frame .lights i:nth-child(1) { background: #ffd060; }
.ts-frame .lights i:nth-child(2) { background: #f8f0d8; }
.ts-frame .lights i:nth-child(3) { background: #ff6a4a; }
.ts-bal { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 8px; background: var(--dex-dark); color: #fff4d8; }
.ts-frame .wd-tabs button.on { background: #ffc860; border-color: #c06810; }
.ts-frame .wd-tabs button:not(.on):hover { background: #ffe8c0; }
.tok { display: inline-block; width: 10px; height: 18px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 9' shape-rendering='crispEdges'><rect x='2' y='0' width='1' height='1' fill='%233a2010'/><rect x='1' y='1' width='3' height='1' fill='%235a3018'/><rect x='0' y='2' width='5' height='4' fill='%23d8402a'/><rect x='1' y='2' width='3' height='4' fill='%23f06a3a'/><rect x='2' y='3' width='1' height='2' fill='%23ffe6a0'/><rect x='1' y='6' width='3' height='1' fill='%235a3018'/><rect x='2' y='7' width='1' height='2' fill='%23d8402a'/></svg>") center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 3px rgba(255, 140, 70, .7)); vertical-align: middle; }
.ts-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--screen); border: 4px solid var(--dex-dark); border-radius: 10px; padding: 12px; box-shadow: inset 0 3px 0 rgba(138, 58, 14, .12); }
.ts-body h4 { margin: 14px 4px 8px; font-size: 9px; color: #a8501a; border-bottom: 2px solid #f0c8a0; padding-bottom: 5px; }
.ts-frame .ts-card { border-color: #f0d0b0; }
.ts-frame .ts-card:hover { border-color: var(--dex-dark); background: #fffaf2; }
.ts-frame .ts-card.on, .ts-frame .ts-card.ts-pack.owned { border-color: #e8792a; background: #fff0dc; }
.ts-frame .ts-card .act.buy { background: #e8792a; border-color: var(--dex-dark); }
.ts-frame .ts-grid .act.buy { width: auto; min-width: 64px; }
.ts-frame .ts-card .pv { border-color: #f0d0b0; }
.ts-bi { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -4px; margin-right: 6px; }
.ts-body h4:first-child { margin-top: 2px; }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ts-card { border: 3px solid #d8d0e8; border-radius: 8px; padding: 9px; display: flex; flex-direction: column; gap: 6px; background: #fff; cursor: pointer; }
.ts-card:hover { border-color: var(--ink); background: #fffaf0; }
.ts-card.on { border-color: #8a4a90; background: #f8eefc; }
.ts-card .nm { font-size: 9px; color: var(--ink); display: flex; justify-content: space-between; gap: 6px; }
.ts-card .ds { font-size: 7px; line-height: 1.6; color: #686878; }
.ts-card .ft { display: flex; justify-content: space-between; align-items: center; font-size: 8px; margin-top: auto; }
.ts-card .pr { display: flex; align-items: center; gap: 4px; color: #a85a10; }
.ts-card .pr .tok { width: 7px; height: 12px; }
.ts-card .pv { position: relative; align-self: center; width: 176px; height: 68px; border-radius: 5px; overflow: hidden; border: 2px solid #d8d0e8; }
.ts-card .pv canvas { display: block; width: 176px; height: 68px; image-rendering: pixelated; }
.ts-card .pv-name { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 7px; padding: 3px 4px; background: rgba(24,24,40,0.7); white-space: nowrap; }
.ts-card .pv-bubble { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); font-size: 6px; padding: 4px 5px; border-radius: 5px; background: var(--bf); border: 2px solid var(--bo); white-space: nowrap; opacity: .92; }
.ts-card .pv-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -4px; border: 4px solid transparent; border-top-color: var(--bo); border-bottom: 0; }
.was { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; }
.ts-card .pr.was { color: #888; }
.shop-list li .price .was { color: #888; margin-right: 4px; }
.ts-card .act { font-family: inherit; font-size: 7px; padding: 5px 7px; border-radius: 5px; border: 2px solid var(--ink); background: #fff; cursor: pointer; }
.ts-card .act.buy { background: #8a4a90; color: #fff; border-color: #5a2a60; }
.ts-card .act.wear { background: #f8d878; }
.ts-card.soon { opacity: .6; cursor: default; }
.ts-card .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 2px solid rgba(0,0,0,.4); vertical-align: middle; }
.ts-note { font-size: 7px; line-height: 1.7; color: #686878; margin: 4px 4px 10px; }
.ts-packs { display: flex; flex-direction: column; gap: 10px; }
.ts-card.ts-pack { flex-direction: row; align-items: stretch; gap: 14px; padding: 12px; border-color: #c89818; background: linear-gradient(135deg, #fffaf0, #fff4e0); }
.ts-card.ts-pack:hover { border-color: var(--ink); }
.ts-card.ts-pack.owned { border-color: #8a4a90; background: #f8eefc; }
.ts-card .pv.pk-pv { width: 264px; height: 88px; align-self: center; flex: none; border-color: #c8d6ea; }
.ts-card .pv.pk-pv canvas { width: 264px; height: 88px; }
.ts-pack .pk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ts-pack .nm { font-size: 11px; }
.pk-aura.pk-candy { color: #e84868; text-shadow: 1px 1px 0 #ffffff; }
.ts-pack .pk-n { font-size: 7px; color: #a85a10; background: #f8e4b8; border-radius: 4px; padding: 3px 5px; }
.ts-pack .ds { font-size: 7px; }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px 8px; }
.pk-list li { display: flex; align-items: center; gap: 5px; font-size: 6px; color: var(--ink); height: 22px; }
.pk-list li img { width: 14px; height: 22px; object-fit: cover; object-position: top; image-rendering: pixelated; flex: none; }
.pk-list li img.pet { width: 22px; height: 20px; object-fit: contain; }
.pk-list li img.t-vest { object-position: center; }
.pk-list li img.t-pants { object-position: bottom; }
.pk-list li .pk-aura { width: 14px; text-align: center; font-style: normal; font-size: 11px; color: #5aa0e0; flex: none; }
.pk-list li.got span::after { content: ' ✓'; color: #2a8a3a; }
.ts-pack .ft { font-size: 9px; }
.ts-pack .act.buy { font-size: 8px; padding: 7px 12px; }
@media (max-width: 640px) { .ts-card.ts-pack { flex-direction: column; } }
.ts-note.test { color: #a85a10; }
.ts-boostq { font-size: 8px; line-height: 1.9; margin: 0 4px 10px; color: var(--ink); }
.hud .boost { font-size: 8px; color: #8a4a90; }

/* server bonus circles beside the rod circle: one per active bonus, with a ring that runs down */
.q-boosts { display: flex; gap: 8px; }
.q-boost { position: relative; width: 52px; height: 52px; border-radius: 50%; cursor: help;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(56,56,72,.25) 0); border: 3px solid var(--ink, #383848); box-shadow: 0 3px 0 rgba(0,0,0,.35);
  display: grid; place-items: center; animation: qbIn .35s cubic-bezier(.2, 1.4, .5, 1); }
.q-boost::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--paper, #f8f8f0); }
.q-boost .ic { position: relative; font-size: 18px; color: var(--ink2, #383848); line-height: 1; }
.q-boost img.ic { width: 32px; height: 32px; image-rendering: pixelated; }
.q-boost .tm { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font-size: 7px; padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--ink, #383848); white-space: nowrap; }
@keyframes qbIn { from { transform: scale(.3); opacity: 0; } }

/* ======================================================================================================
   UI polish: one consistent layer over everything above. Every clickable thing answers the pointer (a
   warm hover tint, a small lift, a press-down) and the keyboard (a gold focus ring); lists highlight the
   row under the pointer; scrollbars match the windows; inputs light up when focused; windows, dialogs,
   menus, toasts and tooltips ease in instead of popping. All motion is skipped for reduced-motion users.
   ====================================================================================================== */
::selection { background: #f8d878; color: #383848; }
::placeholder { color: #a8a8b8; opacity: 1; }

/* buttons, chips, tabs and small controls */
.btn, .chip, .tabs button, .lb-tabs button, .tr-tabs button, .cr-chip, .cr-sw, .q-btn, .ts-card .act, .bm-nav, .mm-head button, .bm-head button,
.dex-x, .chat-hint, .chat-online, .pill.btn, .q-menu button, .tr-list li .qtyc button {
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease, filter .12s ease;
}
.btn:not(:disabled):hover { background: #fff8d8; transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn.primary:not(:disabled):hover { background: #f05050; }
.btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.yn .btn.sel:hover { background: #4a4a5c; color: #fff; }
.chip:not(:disabled):not(.on):not(.sell):hover, .cr-chip:not(.on):hover, .tr-list li .qtyc button:hover { background: #fff3c8; }
.chip.sell:not(:disabled):hover { background: #f05050; }
.chip:not(:disabled):active, .cr-chip:active, .ts-card .act:active { transform: translateY(1px); }
.tabs button:not(.on):hover { filter: brightness(1.08); transform: translateY(-1px); }
.lb-tabs button:not(.on):hover { background: #f4d4a8; color: #6c4018; }
.ah-head .tabs button:not(.on):hover { background: #3a929a; }
.cr-sw:hover { transform: scale(1.12); }
.q-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.dex-x:hover { transform: scale(1.15); color: #f8d878; }
.dex-x.dark:hover { color: var(--red); }
.ts-card .act:hover { filter: brightness(1.08); }
.ts-card { transition: border-color .12s ease, background-color .12s ease, transform .1s ease; }
.ts-card:not(.soon):hover { transform: translateY(-2px); }
.btn:disabled, .chip:disabled { filter: grayscale(.5); }
/* keyboard focus rings inside windows and the login form (not on the HUD: you walk with the keyboard there) */
.overlay button:focus-visible, .overlay .chip:focus-visible, .login button:focus-visible, .menu li:focus-visible { outline: 3px solid #f8d030; outline-offset: 2px; }
.pill.btn:focus, .q-btn:focus, .chat-hint:focus, .chat-online:focus, .now-playing:focus { outline: none; }

/* inputs */
input, select { transition: border-color .12s ease, box-shadow .12s ease; }
input:not([type=range]):not([type=checkbox]):focus, select:focus { border-color: #3878e0 !important; box-shadow: 0 0 0 3px rgba(56, 120, 224, .28); outline: none; }

/* list rows: highlight the one under the pointer */
.bag-list li, .shop-list li, .dex-list li, .ah-list li, .tr-list li, .fr-list li, .lb-rows li, .song-list li, .opt-row, .cal-day, #plList li, #mailList li {
  transition: background-color .1s ease, box-shadow .1s ease, transform .08s ease;
}
.bag-list li:not(.sel):not(.empty):hover, .shop-list li:not(.sel):hover, .dex-list li:not(.sel):hover,
.ah-list li:not(.sel):not(.empty):not(.hdr):not(.locked):hover, .tr-list li[data-tf]:not(.chosen):not(.locked):hover,
#plList li:not(.sel):hover, #mailList li:not(.sel):not(.empty):hover, .opt-row:not(.sel):hover { background: #fff3c8; }
.cal-day:not(.past):hover { transform: translateY(-1px); filter: brightness(1.04); }
.menu li { border-radius: 6px; transition: background-color .1s ease; }
.menu li:hover, .menu li.sel { background: #fff3c8; }

/* scrollbars that match the windows */
* { scrollbar-width: thin; scrollbar-color: #a0a8bc transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #a8b0c4; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-color: #7880a0; }
::-webkit-scrollbar-corner { background: transparent; }

/* windows sit a little above the world */
.overlay { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.overlay > .box, .overlay > .bag-frame, .overlay > .dex-frame, .overlay > .lb-frame, .overlay > .ah-frame { box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 6px var(--frame), 0 4px 0 rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .28); }
.overlay > .bag-frame { box-shadow: inset 0 0 0 4px #e0a868, inset 0 -8px 0 #8c5828, 0 8px 0 rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .3); }
.overlay > .dex-frame { box-shadow: inset 0 -6px 0 var(--dex-dark), 0 8px 0 rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .3); }
.overlay > .lb-frame { box-shadow: inset 0 0 0 4px #e0a868, inset 0 -8px 0 #8c5828, 0 8px 0 rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .3); }
.overlay > .ah-frame { box-shadow: inset 0 0 0 4px #f0c040, inset 0 -8px 0 #0e4248, 0 8px 0 rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .3); }

@media (prefers-reduced-motion: no-preference) {
  /* windows never start invisible: the backdrop dims in and the window slides in, so even if the browser
     stops drawing for a moment (a background tab, a slow machine) the window is already there */
  .overlay:not(.hidden):not(#catchWrap) { animation: uiDim .16s ease-out backwards; }
  .overlay:not(.hidden):not(#catchWrap) > * { animation: uiPanel .24s cubic-bezier(.2, 1.25, .5, 1) backwards; }
  .dialog:not(.hidden) { animation: uiDialog .2s ease-out backwards; }
  .menu:not(.hidden):not(.center) { animation: uiDrop .16s ease-out backwards; }
  .menu.center:not(.hidden) { animation: uiCenter .2s cubic-bezier(.2, 1.25, .5, 1) backwards; }
  .pcard:not(.hidden) { animation: uiCard .2s ease-out backwards; }
  .song-list:not(.hidden), .q-menu:not(.hidden) { animation: uiRise .14s ease-out backwards; }
  .toast { animation: uiToast .28s cubic-bezier(.2, 1.2, .5, 1) backwards; }
  .q-tip, .mm-tip { animation: uiFade .12s ease-out backwards; }
  .menu li.sel::before { animation: uiNudge .7s steps(2) infinite; }
  .badge-n { animation: uiPulse 1.6s ease-in-out infinite; }
}
@keyframes uiFade { from { opacity: 0; } }
@keyframes uiPanel { from { transform: translateY(10px) scale(.97); } }
@keyframes uiDim { from { background-color: rgba(8, 12, 24, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes uiDialog { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes uiDrop { from { opacity: 0; transform: translateY(-6px); } }
@keyframes uiCenter { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes uiCard { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes uiRise { from { opacity: 0; transform: translateY(6px); } }
@keyframes uiToast { from { opacity: 0; transform: translateX(24px); } }
@keyframes uiNudge { 50% { transform: translateX(2px); } }
@keyframes uiPulse { 50% { transform: scale(1.12); } }

/* ---- admin tools: the ADMIN tag in chat, and announcements that wrap */
.chat-staff { display: inline-block; padding: 1px 4px 0; margin-right: 2px; font-size: 7px; line-height: 9px; vertical-align: 1px; color: #fff; background: #d03838; border: 1px solid #ff8080; border-radius: 2px; letter-spacing: .5px; }
.milestone.ms-long { white-space: normal; width: min(92vw, 760px); }
.milestone.ms-long .ms-big { font-size: clamp(12px, 2.2vw, 18px); line-height: 1.6; color: #fff; text-shadow: 2px 2px 0 #282030, -2px -2px 0 #282030, 2px -2px 0 #282030, -2px 2px 0 #282030, 0 0 14px rgba(120, 180, 255, .6); animation: none; }
.milestone.ms-long .ms-small { color: #f8d040; }

/* ---- Admin window */
.mp-frame { width: min(600px, 100%); height: min(640px, 100%); }
.mp-tabs { grid-template-columns: repeat(4, 1fr); }
.mp-body section > * + * { margin-top: 10px; }
.mp-body h4 { margin-top: 16px; }
.mp-sel { padding: 12px; background: #fff8e0; border: 3px solid #e8c868; border-radius: 8px; }
.mp-who { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.mp-who .lv { color: var(--red); font-size: 9px; }
.mp-facts { font-size: 8px; color: #686878; margin-top: 8px; line-height: 1.6; }
.mp-standing { display: inline-block; margin-top: 8px; padding: 5px 8px; font-size: 8px; border-radius: 4px; line-height: 1.5; }
.mp-standing.ok { background: #d8f4d0; color: #287028; }
.mp-standing.warn { background: #ffe8b8; color: #8a5a00; }
.mp-standing.bad { background: #ffd8d8; color: #a82020; }
.mp-reason, .mp-ann input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 10px; padding: 9px; border: 3px solid var(--ink); border-radius: 6px; outline: none; user-select: text; -webkit-user-select: text; }
.mp-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mp-lbl { width: 44px; font-size: 9px; color: var(--ink); }
.mp-amt { width: 110px; font-family: inherit; font-size: 9px; padding: 6px 7px; border: 3px solid var(--ink); border-radius: 6px; outline: none; user-select: text; -webkit-user-select: text; }
.mp-check { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-size: 8px; color: #686878; line-height: 1.5; cursor: pointer; }
.mp-check input { margin: 0; flex: none; }
.mp-req { padding: 10px; margin-bottom: 10px; border: 2px solid #d8dce8; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.mp-req .fr-list { margin: 0; }
.mp-tag.ok { background: #2a8a3a; color: #fff; }
.mp-players .dot { width: 8px; height: 8px; border-radius: 50%; background: #a8a8b8; flex: none; margin-right: 6px; }
.mp-players li.on .dot { background: #48c048; }
.mp-players li.off .nm { color: #686878; }
.mp-players .mp-sep { font-size: 8px; color: #686878; letter-spacing: 1px; padding: 8px 4px 2px; background: none; border: 0; box-shadow: none; }
.mp-danger { margin-top: 12px; padding-top: 10px; border-top: 2px dashed #c02828; }
.mp-danger .mp-lbl { color: #c02828; }
.mp-tag { font-size: 7px; padding: 3px 5px 2px; border-radius: 3px; color: #fff; flex: none; }
.mp-tag.staff { background: #d03838; }
.mp-tag.warn { background: #d88a18; }
.mp-tag.bad { background: #883030; }
.mp-row-click { cursor: pointer; }
.fr-list li.sel { background: #f8d878; box-shadow: inset 0 0 0 2px #c89818; }
.mp-empty { color: #9898a8; justify-content: center; }
.mp-log li { align-items: flex-start; }
.mp-log li .nm { white-space: normal; line-height: 1.5; }
.mp-log li .where { white-space: normal; }
.mp-ann { display: flex; flex-direction: column; gap: 8px; }
.mp-ann .btn { align-self: flex-end; font-size: 10px; padding: 10px 14px; }
.mp-picks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mp-picks .chip { text-align: left; line-height: 1.5; }
.mp-note { font-size: 8px; color: #686878; line-height: 1.6; margin: 0; }
.mp-status { min-height: 14px; font-size: 9px; text-align: center; line-height: 1.5; }
.mp-status.ok { color: #287028; }
.mp-status.bad { color: #c02828; }
.pcard .mp-mod { background: #383848; color: #fff; }

/* ---- Server full (title screen) */
.full-box { text-align: center; }
.full-title { font-size: 14px; color: var(--red); letter-spacing: 1px; }
.full-text, .full-wait { margin: 0; font-size: 9px; line-height: 1.7; color: var(--ink); }
.full-wait { color: #686878; min-height: 30px; }
.queue-label { font-size: 8px; color: #686878; letter-spacing: 1px; }
.queue-pos { font-size: 28px; color: var(--ink); margin: -4px 0 2px; }
.title-online { margin-top: 14px; font-size: clamp(8px, 1.8vw, 10px); color: #fff4d8; text-shadow: 2px 2px 0 #6a2e0c; }
.title-online::before { content: '●'; color: #6ce06c; margin-right: 6px; }
.title-online.busy::before { color: #ff7a5a; }

/* ---- Homes: the bar along the top inside a home, the EDIT HOME panel, the fish chest / tank window */
.home-bar { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px;
  background: rgba(24, 24, 40, .82); color: #fff; border: 2px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 6px 8px 6px 12px; font-size: 9px; white-space: nowrap; }
.home-bar .chip { font-size: 8px; }
.edit-panel { position: fixed; right: 12px; top: 56px; bottom: 12px; width: 230px; z-index: 7; display: flex; flex-direction: column; gap: 8px; padding: 12px; font-size: 9px; }
.edit-panel .ep-head { display: flex; align-items: center; justify-content: space-between; }
.edit-panel .ep-head .btn { font-size: 9px; padding: 6px 10px; }
.edit-panel .ep-help { margin: 0; color: #686878; font-size: 7px; line-height: 1.7; }
.edit-panel h4 { margin: 4px 0 0; font-size: 8px; color: #686878; font-weight: normal; }
.ep-sel { display: flex; flex-direction: column; gap: 6px; }
.ep-sel:empty { display: none; }
.ep-sel .row { display: flex; gap: 6px; }
.ep-sel .row .btn { flex: 1; font-size: 8px; padding: 6px 4px; }
.ep-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ep-list li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #eef0f6; border-radius: 6px; cursor: pointer; }
.ep-list li.sel { background: #f8d878; box-shadow: inset 0 0 0 2px #c89818; }
.ep-list li img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.ep-list li .nm { flex: 1; }
.ep-list li .n { color: #686878; }
.ep-list .empty { cursor: default; color: #686878; line-height: 1.6; }
.hp-frame { width: min(760px, 100%); }
.hp-top { display: flex; gap: 10px; }
.hp-top:empty { display: none; }
.hp-slot { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #d8ecf8; border: 2px dashed #78a8c8; font-size: 9px; min-height: 52px; cursor: pointer; }
.hp-slot.full { border-style: solid; background: #e8f4fc; }
.hp-slot img { width: 48px; image-rendering: pixelated; }
.hp-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-col { display: flex; flex-direction: column; min-height: 0; }
.hp-col h4 { font-size: 9px; font-weight: normal; color: #686878; margin: 0 0 6px; }
.hp-col .fr-list { overflow-y: auto; flex: 1; }
.hp-col .fr-list li { cursor: pointer; }
.hp-col .fr-list li img { width: 36px; image-rendering: pixelated; }
.hp-col .fr-list li .len { color: #686878; font-size: 8px; }
.hp-col .fr-list li .go { font-size: 8px; color: #3870d8; }
@media (max-width: 640px) { .hp-cols { grid-template-columns: 1fr; } .edit-panel { top: auto; height: 46%; width: auto; left: 12px; } }

/* ---------------------------------------------------------------- Touch gamepad (phones / tablets)
   Only shown once body.touch is set (js/touch.js). Thumb stick bottom-left, A / B bottom-right. */
.touchpad { position: fixed; inset: auto 0 0 0; z-index: 7; pointer-events: none; display: none; justify-content: space-between; align-items: flex-end;
  padding: 0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
body.touch .touchpad:not(.hidden) { display: flex; }
.touchpad * { -webkit-tap-highlight-color: transparent; touch-action: none; }
.tp-stick { pointer-events: auto; position: relative; width: 132px; height: 132px; border-radius: 50%;
  background: rgba(24, 24, 40, .38); border: 3px solid rgba(248, 248, 248, .7); box-shadow: 0 0 0 2px rgba(56, 56, 72, .5); }
.tp-stick::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 2px dashed rgba(248, 248, 248, .3); }
.tp-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--frame), 0 3px 0 rgba(0, 0, 0, .35); }
.tp-stick.on { background: rgba(24, 24, 40, .5); }
.tp-stick:not(.on) .tp-knob { transition: transform .12s ease-out; }
.tp-right { position: relative; width: 168px; height: 150px; pointer-events: none; }
.tp-btn, .tp-mini { pointer-events: auto; position: absolute; font-family: inherit; color: var(--ink); cursor: pointer; padding: 0;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--frame), 0 4px 0 rgba(0, 0, 0, .35); }
.tp-btn { width: 70px; height: 70px; border-radius: 50%; font-size: 18px; }
.tp-a { right: 0; bottom: 34px; color: var(--red); }
.tp-b { right: 82px; bottom: 0; color: #3878e0; width: 60px; height: 60px; font-size: 15px; }
.tp-small { position: absolute; left: 0; top: 0; display: flex; gap: 6px; pointer-events: none; }
.tp-mini { position: static; font-size: 8px; padding: 8px 9px; border-radius: 8px; }
.tp-btn.on, .tp-mini.on { transform: translateY(3px); background: #fff3c8; box-shadow: inset 0 0 0 2px #fff3c8, inset 0 0 0 4px var(--frame), 0 1px 0 rgba(0, 0, 0, .35); }

/* make room for the pad: chat above the stick, minimap up top under MENU, minigame above the buttons */
body.touch .chat { bottom: 164px; width: min(300px, calc(100vw - 24px)) !important; }
body.touch .chat-log { max-height: min(22vh, 140px) !important; min-height: 0 !important; }
body.touch .chat-hint { font-size: 0; } body.touch .chat-hint::after { content: 'CHAT'; font-size: 9px; }
body.touch .minimap { bottom: auto; top: 62px; }
body.touch #mmCanvas { height: 64px; }
body.touch #toasts { top: auto; bottom: 170px; }
body.touch .mg { bottom: 168px; }
body.touch .hint { bottom: auto; top: 16px; }
body.touch #game { touch-action: none; }
/* short landscape phones: smaller pad, chat beside the HUD instead of on top of the stick */
@media (max-height: 460px) {
  .tp-stick { width: 112px; height: 112px; }
  .tp-knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .tp-right { height: 128px; width: 150px; }
  .tp-btn { width: 60px; height: 60px; font-size: 15px; } .tp-b { width: 52px; height: 52px; right: 72px; } .tp-a { bottom: 30px; }
  body.touch .chat { bottom: 136px; }
  body.touch .chat-log { max-height: 18vh !important; }
  body.touch .mg { bottom: 12px; width: min(420px, calc(100vw - 340px)); }
  body.touch #toasts { bottom: 140px; }
}
/* dialogs: between the pads in landscape, above them in portrait */
body.touch .dialog { width: min(760px, calc(100vw - 2 * max(176px, env(safe-area-inset-left) + 162px))); min-height: 84px; }
body.touch .dialog p { font-size: 11px; }
@media (orientation: portrait) {
  body.touch .dialog { width: calc(100vw - 24px); bottom: 172px; }
  body.touch .chat { bottom: 164px; }
  body.touch .hud { min-width: 0; max-width: calc(100vw - 110px); }
  body.touch .minimap { top: auto; bottom: 330px; }
  body.touch .mg { width: calc(100vw - 24px); }
}
body.touch .chat-bar { flex-wrap: wrap; }

/* ---- the log-in screen: lantern orange, a little device like the Token Shop (an orange shell with lights, a cream screen) */
.title .box { position: relative; background: #fff6ec; color: #4a2410; border: 10px solid #e8792a; border-top-width: 32px; border-radius: 18px;
  box-shadow: 0 0 0 4px #8a3a0e, inset 0 0 0 3px #8a3a0e, inset 0 4px 0 3px rgba(138, 58, 14, .14), 0 10px 0 4px rgba(0, 0, 0, .35), 0 0 46px rgba(255, 150, 60, .4); }
.title .box::before { content: ""; position: absolute; top: -23px; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: #ffd060;
  box-shadow: 0 0 0 2px #8a3a0e, 22px 0 0 0 #f8f0d8, 22px 0 0 2px #8a3a0e, 44px 0 0 0 #ff6a4a, 44px 0 0 2px #8a3a0e; }
.title .login label { color: #6a2e0c; }
.title .login input, .title .login textarea { border-color: #8a3a0e; background: #fffdf8; }
.title .login input:focus, .title .login textarea:focus { border-color: #e8792a; box-shadow: 0 0 0 3px rgba(232, 121, 42, .3); }
.title .btn { border-color: #8a3a0e; box-shadow: 0 3px 0 #8a3a0e; color: #4a2410; }
.title .btn.primary { background: #e8792a; color: #fff; text-shadow: 1px 1px 0 #8a3a0e; }
.title .btn:not(:disabled):hover { background: #ffe8c8; box-shadow: 0 4px 0 #8a3a0e; }
.title .btn.primary:not(:disabled):hover { background: #f58c3c; }
.title .btn:not(:disabled):active { box-shadow: 0 1px 0 #8a3a0e; }
.title .linkbtn { color: #b8541a; }
.title .linkbtn:hover { color: #8a3a0e; }
.title .forgot { color: #b88a68; }
.title .full-title { color: #c8501a; }
.title .reg-note { color: #b8541a; }
.title .rec-secret { border-color: #e8792a; }

/* ---- name colors and tags (ADMIN) by names: the player panel and the leaderboards */
.name-tag { display: inline-block; margin-left: 6px; padding: 2px 4px; border-radius: 3px; font-size: 6px; line-height: 1; vertical-align: 2px; color: #fff; background: #c83828; letter-spacing: 1px; }
#hudName.colored, .lb-name.colored { text-shadow: 1px 1px 0 #383848, -1px 1px 0 #383848, 1px -1px 0 #383848, -1px -1px 0 #383848; }
.lb-records .lb-num { color: #888898; margin-right: 6px; }
.lb-records li.has-rec { cursor: pointer; }
.lb-records li.has-rec:hover { filter: brightness(1.04); }
.lb-records .rec-info { display: none; grid-column: 1 / -1; font-size: 7px; line-height: 1.8; color: #686878; border-top: 2px dashed #e0c8a8; padding-top: 5px; }
.lb-records li.open .rec-info { display: block; }
.lvreq { font-size: 7px; color: #888898; margin-left: 4px; }
.chat-lv { color: #f8d878; font-size: .85em; }