/* Paddlebrook: the game page. Warm cream and sunshine yellow over pond teal; everything rounded. */
:root {
  --ink: #2b3d3f;
  --muted: #6f8a8c;
  --cream: #fffdf6;
  --sun: #ffd24a;
  --sun-deep: #e6a920;
  --sun-pale: #fff0bf;
  --teal: #2a6b6e;
  --pond: #5fb8d9;
  --shadow: 0 10px 30px rgba(20, 50, 55, 0.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9bd57a; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
* { -webkit-tap-highlight-color: transparent; }   /* no blue flash on tap (mobile) */
input, button { font: inherit; }
#game { position: fixed; inset: 0; display: block; cursor: pointer; touch-action: none; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud > * { position: absolute; }
#topRight { right: 14px; top: 12px; display: flex; gap: 6px; }
#gameClock, #onlineCount, #fpsCounter { display: inline-block; padding: 4px 12px; border-radius: 12px; background: rgba(20, 44, 46, 0.55); color: #fff; font-size: 12px; font-weight: 600; }
#gameClock { font-variant-numeric: tabular-nums; }
#fpsCounter { min-width: 62px; text-align: center; cursor: help; }
#topRow2 { right: 14px; top: 44px; display: flex; align-items: center; gap: 8px; }
#goldBadge { display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border-radius: 14px; background: rgba(255, 244, 205, 0.94); font-size: 13px; font-weight: 800; color: #7a5410; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 rgba(0,0,0,0.12); }
.coin { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8 0 18%, #ffd24a 42%, #e0a21c 100%); box-shadow: inset 0 0 0 2px #c98c14, inset 0 0 0 4px rgba(255,255,255,0.35); }
#menuBtn { border: none; border-radius: 14px; padding: 6px 14px; background: rgba(255, 254, 248, 0.88); font-size: 12px; font-weight: 700; color: #557072; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.1); }
#menuBtn:hover { background: #fff; }

/* The hover tooltip over things in the world (as in Otter Wilds). */
.tip { position: fixed; z-index: 15; padding: 5px 10px; border-radius: 9px; background: rgba(20, 44, 46, 0.88); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; }
#zoneBanner { position: fixed; left: 50%; top: 84px; transform: translate(-50%, -12px); padding: 10px 26px; border-radius: 26px; background: rgba(255, 253, 246, 0.94); color: var(--teal); font-size: 22px; font-weight: 800; letter-spacing: 0.01em; box-shadow: var(--shadow); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none; }
#zoneBanner.show { opacity: 1; transform: translate(-50%, 0); }

/* chat: bottom-left, above the input */
#chatLog { left: 14px; bottom: 60px; width: min(340px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.chat-line { align-self: flex-start; max-width: 100%; padding: 4px 11px; border-radius: 12px; background: rgba(20, 44, 46, 0.6); color: #fff; font-size: 13px; line-height: 1.35; word-break: break-word; transition: opacity 1.5s; }
.chat-line b { color: #ffe28a; }
.chat-line.system { background: rgba(255, 244, 205, 0.9); color: #6b4d12; font-weight: 600; }
.chat-line.old { opacity: 0; }
#chatForm { left: 14px; bottom: 16px; width: min(340px, calc(100vw - 28px)); }
#chatInput { width: 100%; border: none; border-radius: 14px; padding: 9px 14px; background: rgba(255, 253, 246, 0.9); font-size: 13px; color: var(--ink); outline: none; box-shadow: 0 2px 0 rgba(0,0,0,0.1); }
#chatInput:focus { background: #fff; box-shadow: 0 0 0 3px rgba(255, 210, 74, 0.7); }

/* the bar of little actions along the bottom */
#dock { left: 14px; top: 12px; display: flex; align-items: center; gap: 6px; }
.dock-btn { border: none; border-radius: 16px; padding: 8px 14px; background: rgba(255,255,255,0.85); color: #557072; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.1); transition: transform .08s, background .12s; }
.dock-btn:hover { background: #fff; transform: translateY(-1px); }
.dock-btn:active { transform: translateY(1px); }
.dock-btn.main { background: var(--sun); color: #5b3f08; box-shadow: 0 2px 0 var(--sun-deep); }
.dock-btn.main:hover { background: #ffdc6a; }


/* ---------- Windows ---------- */
.modal-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(30, 60, 62, 0.35); backdrop-filter: blur(4px); z-index: 20; }
.modal-overlay.visible { display: flex; }
.modal { width: min(420px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; padding: 22px 24px 20px; border-radius: 24px; background: var(--cream); box-shadow: var(--shadow); animation: pop .18s ease-out; }
.modal.wide { width: min(640px, calc(100vw - 28px)); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal h2 { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.modal-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.modal-tab { border: none; border-radius: 13px; padding: 6px 14px; background: #e6f0ee; color: #557072; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.modal-tab:hover { background: #dbebe8; }
.modal-tab.active { color: var(--teal); background: var(--sun-pale); box-shadow: 0 2px 0 #e2c46a; }
.modal-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

.btn { border: none; border-radius: 15px; padding: 10px 20px; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform .08s, filter .12s; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#ffdc62, var(--sun)); color: #5b3f08; box-shadow: 0 3px 0 var(--sun-deep); }
.btn.primary:hover { filter: brightness(1.05); }
.btn.quiet { background: #e6f0ee; color: #557072; box-shadow: 0 3px 0 rgba(0,0,0,0.1); }
.btn.big { width: 100%; padding: 13px 20px; font-size: 16px; }
.btn:disabled { opacity: .6; cursor: default; }

.profile-rows { margin: 0 0 12px; padding: 0 6px; }
.profile-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid #efe6cf; }
.profile-rows dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.profile-rows dd { margin: 0; font-size: 15px; font-weight: 800; color: var(--teal); text-align: right; }
.menu-section { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 12px; border-radius: 14px; background: #f3f8f6; font-size: 14px; font-weight: 700; }
.menu-row label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.menu-row input[type=checkbox] { width: 18px; height: 18px; accent-color: #e6a920; }
.menu-row input[type=range] { width: 120px; accent-color: #e6a920; }
.modal.controls { width: min(460px, calc(100vw - 28px)); }
.controls-list { max-height: 60vh; overflow-y: auto; padding: 0 4px; }
.controls-list h3 { margin: 14px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.controls-list h3:first-child { margin-top: 0; }
.controls-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 2px; border-bottom: 1px solid #efe6cf; font-size: 14px; font-weight: 700; color: var(--ink); }
.controls-row kbd { flex: none; min-width: 26px; padding: 3px 9px; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 #d9cfae, inset 0 0 0 1px #e8dfc2; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--teal); text-align: center; white-space: nowrap; }
.menu-help { margin: 14px 4px 0; font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center; }
.menu-help b { color: var(--ink); }

/* the wardrobe */
.dye-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; min-height: 40px; }
.dye-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: 16px; border: 2px solid transparent; background: #f7efd9; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; text-align: center; }
.dye-card:hover { background: #fbf3dc; }
.dye-card canvas { border-radius: 12px; background: #e6f0ee; }
.dye-card b { font-size: 13.5px; color: var(--ink); }
.dye-card span { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8aa0a2; }
.dye-card.on { border-color: #f2c94c; background: #fff4cf; }
.dye-card.on span { color: #a5741b; }
/* the pack: three rows of five */
.modal.pack { width: min(440px, calc(100vw - 28px)); }
.modal h2 span { margin-left: 6px; color: #9db2b4; letter-spacing: .06em; }
.pack-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pack-slot { position: relative; aspect-ratio: 1; padding: 0; border: none; border-radius: 16px; background: #e6f0ee; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; display: grid; place-items: center; transition: background .1s; }
.pack-slot { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.pack-slot.empty { cursor: default; }
.pack-slot.dragging { opacity: 0.35; }
.pack-slot.drop { background: #fff4cf; outline: 3px dashed var(--sun); }
.pack-ghost { position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); filter: drop-shadow(0 7px 9px rgba(20,44,46,0.32)); }
.pack-ghost .count { position: absolute; right: -2px; bottom: -2px; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 0 3px rgba(20,44,46,0.95), 0 1px 1px rgba(20,44,46,0.9); font-variant-numeric: tabular-nums; }
body.pack-dragging, body.pack-dragging * { cursor: grabbing !important; }
.pack-slot:hover { background: #dcebe8; }
.pack-slot.empty { background: #eef4f1; box-shadow: inset 0 2px 3px rgba(0,0,0,0.06); }
.pack-slot.sel { background: #fff4cf; outline: 3px solid var(--sun); }
.pack-slot canvas { pointer-events: none; }
.pack-slot.held::after { content: 'IN HAND'; position: absolute; left: 5px; top: 4px; padding: 1px 5px; border-radius: 6px; background: var(--sun); color: #5b3f08; font-size: 8.5px; font-weight: 900; letter-spacing: .04em; }
.pack-slot .count { position: absolute; right: 6px; bottom: 3px; font-size: 12px; font-weight: 900; color: #fff; text-shadow: 0 0 3px rgba(20,44,46,0.95), 0 1px 1px rgba(20,44,46,0.9); font-variant-numeric: tabular-nums; }
.pack-slot .wear { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 5px; border-radius: 3px; background: rgba(20,44,46,0.2); overflow: hidden; }
.pack-slot .wear i { display: block; height: 100%; border-radius: 3px; background: #58b368; }
.pack-slot .wear i.mid { background: #e8b431; } .pack-slot .wear i.low { background: #d9574a; }
.modal.collection { width: min(600px, calc(100vw - 28px)); }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-height: 44vh; overflow-y: auto; padding: 3px; }
.coll-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: none; border-radius: 16px; background: #fff; font: inherit; cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,0.08), inset 0 0 0 2px #e6f0ee; transition: transform .08s, background .1s; }
.coll-tile:hover { transform: translateY(-1px); background: #fbfdfc; }
.coll-tile.sel { background: #fff4cf; box-shadow: 0 2px 0 rgba(0,0,0,0.08); outline: 3px solid var(--sun); }
.coll-tile canvas { pointer-events: none; }
.coll-tile .nm { font-size: 12px; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.2; }
.coll-tile.unseen { background: #eef2f0; box-shadow: inset 0 2px 3px rgba(0,0,0,0.06); }
.coll-tile.unseen.sel { background: #f6f0da; outline: 3px solid #e2c46a; }
.coll-tile.unseen canvas { filter: grayscale(1) contrast(0.8); opacity: 0.4; }
.coll-tile.unseen .nm { color: #a3b1b2; }
.coll-museum { position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; box-shadow: 0 1px 0 rgba(0,0,0,0.15); }
.coll-museum svg { width: 12px; height: 12px; display: block; }
.dye-card .own-count { font-size: 11px; font-weight: 700; color: #6f8a8c; }
.wheel-overlay { position: fixed; inset: 0; z-index: 14; display: none; background: rgba(20, 44, 46, 0.3); -webkit-user-select: none; user-select: none; }
.wheel-overlay.visible { display: block; }
.wheel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: wheelIn .14s ease-out; }
@keyframes wheelIn { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wheel-centre { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: rgba(255, 253, 246, 0.94); box-shadow: 0 6px 20px rgba(20, 50, 55, 0.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.25; color: #557072; transition: transform .1s, background .1s; }
.wheel-centre.sel { background: #fff4cf; transform: scale(1.05); }
.wheel-centre small { font-size: 9.5px; font-weight: 700; color: #8aa0a2; }
.wheel-tool { position: absolute; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: #fffdf6; box-shadow: 0 6px 18px rgba(20, 50, 55, 0.28), inset 0 0 0 3px #e6f0ee; display: grid; place-items: center; transition: transform .1s, background .1s, box-shadow .1s; }
.wheel-tool canvas { pointer-events: none; }
.wheel-tool .key { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); min-width: 18px; padding: 1px 5px; border-radius: 8px; background: #e6f0ee; color: #557072; font-size: 10.5px; font-weight: 900; text-align: center; }
.wheel-tool .nm { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 0 3px rgba(20,44,46,0.95), 0 1px 1px rgba(20,44,46,0.9); }
.wheel-tool.sel { background: #fff4cf; transform: scale(1.12); box-shadow: 0 8px 22px rgba(20, 50, 55, 0.32), inset 0 0 0 4px var(--sun); }
.wheel-tool.held { box-shadow: 0 6px 18px rgba(20, 50, 55, 0.28), inset 0 0 0 4px #58b368; }
.wheel-tool.held.sel { box-shadow: 0 8px 22px rgba(20, 50, 55, 0.32), inset 0 0 0 4px #58b368; }
.wheel-tool.none { background: rgba(238, 242, 240, 0.9); box-shadow: 0 4px 12px rgba(20, 50, 55, 0.18), inset 0 2px 3px rgba(0,0,0,0.06); }
.wheel-tool.none canvas { filter: grayscale(1) contrast(0.8); opacity: 0.4; }
.wheel-tool.none .nm { color: rgba(255,255,255,0.7); }
.wheel-hint { position: absolute; left: 0; right: 0; bottom: 74px; margin: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 0 4px rgba(20,44,46,0.9); }
.scripture { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 11; width: min(740px, calc(100vw - 28px)); padding: 14px 24px 16px; border-radius: 18px; background: rgba(255, 250, 236, 0.95); box-shadow: 0 10px 30px rgba(60, 40, 15, 0.28); text-align: center; pointer-events: none; font-family: Georgia, 'Times New Roman', serif; color: #3b2f22; transition: opacity .45s; }
.scripture.hidden { display: none; }
.scripture.fade { opacity: 0.15; }
.scripture.peek { opacity: 0.4; }   /* the mouse is over it: see through it to the church behind */
.scripture-ref { font-variant: small-caps; letter-spacing: .1em; font-weight: 700; font-size: 14px; color: #8a6a3c; margin-bottom: 6px; }
.scripture-text { font-size: 19px; line-height: 1.5; min-height: 28px; }
.scripture-bar { height: 3px; margin: 12px 30px 0; border-radius: 2px; background: rgba(138, 106, 60, 0.18); overflow: hidden; }
.scripture-bar i { display: block; height: 100%; width: 100%; background: #b98a4e; transform-origin: left; }
/* The decorate panel: docked at the side, not a modal-overlay, since decorating means clicking the room itself. */
.decor-panel { position: fixed; right: 14px; top: 80px; z-index: 12; width: min(250px, calc(100vw - 28px)); max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px; border-radius: 18px; background: var(--cream); box-shadow: var(--shadow); animation: pop .18s ease-out; }
.decor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.decor-head h3 { margin: 0; font-size: 17px; color: var(--teal); }
.decor-x { border: 0; background: none; font-size: 24px; line-height: 1; color: #8a9a9b; cursor: pointer; }
.decor-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.decor-tabs .modal-tab { padding: 5px 9px; font-size: 12px; }
.decor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.decor-swatch { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 2px solid transparent; border-radius: 12px; background: #f3efe2; cursor: pointer; }
.decor-swatch:hover { background: #ebe4cf; }
.decor-swatch.sel { border-color: var(--sun); background: #fff5d6; }
.decor-swatch.used { opacity: 0.4; cursor: default; }
.decor-swatch.plain { font-size: 11.5px; font-weight: 800; color: #7a8a8b; }
.decor-swatch .count { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 3px rgba(20,44,46,0.95), 0 1px 1px rgba(20,44,46,0.9); }
.decor-empty { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: #7a9092; }
.decor-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #5d7577; min-height: 34px; }
.modal.map { width: min(800px, calc(100vw - 28px)); }
#mapCanvas { display: block; width: 100%; height: min(460px, 56vh); border-radius: 16px; background: #dfeee8; }
.map-hint { margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 700; color: #7a9092; }
.map-hint .you { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; background: #ffd24a; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #d99a12; }
.modal.museum { width: min(640px, calc(100vw - 28px)); }
.coll-tile.ready { box-shadow: 0 2px 0 rgba(0,0,0,0.08), inset 0 0 0 3px var(--sun); }
.cal-where.ok { color: #3f8a55; }
.cal-where.give { color: #b8862a; }
.modal.calendar { width: min(640px, calc(100vw - 28px)); }
.cal-body { max-height: 46vh; overflow-y: auto; padding: 0 3px; }
.modal.visit { width: min(400px, calc(100vw - 28px)); }
.modal.visit .hint { margin: 0 0 14px; color: #7d9092; font-weight: 600; font-size: 14px; line-height: 1.45; text-align: center; }
.modal.timetable { width: min(600px, calc(100vw - 28px)); }
.modal.timetable .hint { margin: 0 0 12px; color: #7d9092; font-weight: 600; font-size: 14px; text-align: center; }
.tt-body { max-height: 62vh; overflow-y: auto; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(14, auto); gap: 4px 18px; padding: 0 3px; }   /* 27 books: down the first column, then on to the next */
.tt-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; border-radius: 9px; font-weight: 700; font-size: 15px; color: #3d5254; }
.tt-row span:last-child { color: #7d9092; font-weight: 600; white-space: nowrap; }
.tt-row:nth-child(odd) { background: rgba(60, 100, 105, 0.06); }
.tt-note { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 600; color: #9db2b4; }
.tt-row.now { background: #ffe9a6; color: #5b3f08; }
.tt-row.now span:last-child { color: #8a6a12; font-weight: 800; }
@media (max-width: 520px) { .tt-body { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; } }
.modal.calendar .pack-info { min-height: 58px; margin-top: 10px; }
.cal-group h4 { display: flex; align-items: center; gap: 8px; margin: 12px 4px 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cal-group h4 small { font-weight: 700; letter-spacing: 0; text-transform: none; color: #9db2b4; }
.cal-group h4 .chip { padding: 1px 8px; border-radius: 9px; background: #dff3e3; color: #2f7a4f; letter-spacing: .04em; font-size: 10px; }
.cal-where { font-size: 10px; font-weight: 700; color: #8aa0a2; margin-top: -3px; }
.cal-group:first-child h4 { margin-top: 2px; }
.coll-tile.unseen .cal-where { color: #b6c2c3; }
.coll-empty { grid-column: 1 / -1; padding: 26px 10px; text-align: center; color: #9db2b4; font-weight: 700; }
.pack-info { margin-top: 14px; min-height: 92px; padding: 12px 14px; border-radius: 16px; background: #f3f8f6; font-size: 13.5px; line-height: 1.5; color: #557072; }
.pack-info .hint { color: #9db2b4; font-weight: 600; }
.pack-info .name { font-size: 16px; font-weight: 900; color: var(--ink); }
.pack-info .chip { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 10px; background: #fff; font-size: 11.5px; font-weight: 800; color: #6f8a8c; vertical-align: 2px; }
.pack-info .facts { margin-top: 4px; font-weight: 700; color: var(--teal); }
.btn.armed { background: #f6d5cf; color: #8f2a20; box-shadow: 0 3px 0 rgba(143,42,32,0.25); }
/* Hazel's shop */
.modal h2 .shop-gold, .modal h2 .shop-gold span { color: #7a5410; margin-left: 0; letter-spacing: 0; }
.shop-gold { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px !important; padding: 2px 10px 2px 5px; border-radius: 12px; background: rgba(255, 244, 205, 0.95); color: #7a5410; letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 800; vertical-align: 1px; }
.coin.sm { width: 15px; height: 15px; box-shadow: inset 0 0 0 1.5px #c98c14, inset 0 0 0 3px rgba(255,255,255,0.35); }
.shop-say { margin: -4px 0 12px; text-align: center; font-size: 13.5px; font-style: italic; color: #6a7f62; }
.modal.shop { max-height: calc(100vh - 28px); }
.shop-confirm { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; margin-top: 12px; padding: 6px 12px; border-radius: 14px; background: #f7efd9; font-weight: 800; font-size: 14px; color: var(--ink); }
.shop-confirm.hidden { display: none; }
.shop-confirm .hint { color: #8aa0a2; font-weight: 700; }
.shop-confirm .btn { padding: 8px 22px; }
.dye-card.shop { cursor: pointer; } .dye-card.shop:disabled { opacity: .55; cursor: default; }
.dye-card .price, .shop-confirm .price { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 900; letter-spacing: 0; text-transform: none; color: #7a5410; }
.sell-row { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.buy-btn { display: inline-flex; align-items: center; gap: 3px; border: none; border-radius: 12px; padding: 4px 9px; background: var(--sun); color: #5b3f08; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 0 var(--sun-deep); }
.buy-btn .price { color: #5b3f08; font-size: 12px; }
.dye-empty { grid-column: 1 / -1; margin: 18px 0; text-align: center; font-size: 13px; font-weight: 700; color: #8aa0a2; }

/* ---------- The login screen ---------- */
#loginOverlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 30; background: #f9e3bf; overflow: auto; }
#loginOverlay.visible { display: flex; }
.login-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-wrap { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 16px; width: 100%; }
.login-kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(60, 60, 50, 0.6); text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.login-title { font-size: clamp(44px, 9vw, 72px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; color: #fffdf6; text-shadow: 0 3px 0 #d9982b, 0 6px 0 rgba(120, 70, 20, 0.35), 0 12px 28px rgba(80, 50, 10, 0.25); margin: 4px 0 60px; }
.login-card { position: relative; width: min(360px, 100%); padding: 74px 24px 20px; border-radius: 26px; background: rgba(255, 253, 246, 0.95); box-shadow: var(--shadow); }
#loginDuck { position: absolute; left: 50%; top: -70px; transform: translateX(-50%); width: 132px; height: 132px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(60, 40, 10, 0.18)); }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; margin: 0 4px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input { width: 100%; border: 2px solid transparent; border-radius: 14px; padding: 11px 14px; background: #f0f6f4; font-size: 15px; color: var(--ink); outline: none; transition: border-color .12s, background .12s; user-select: text; -webkit-user-select: text; }
.field input:focus { border-color: var(--sun); background: #fff; }
.login-error { min-height: 18px; margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #c44b3f; }
.login-hint { margin: 8px 4px 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.login-clock { position: absolute; right: 14px; top: 12px; padding: 4px 12px; border-radius: 12px; background: rgba(20, 44, 46, 0.55); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.login-back { margin-top: 18px; font-size: 13px; font-weight: 700; color: rgba(60, 60, 50, 0.7); text-decoration: none; }
.login-back:hover { color: #2b3d3f; }

@media (max-width: 700px) {
  #zoneBanner { font-size: 18px; top: 74px; }
}