/* Ruthless Games — dark, modern, gold when it's real. */
:root {
  --bg: #181818;
  --card: #1F1F1F;
  --card2: #272727;
  --edge: #313131;
  --ink: #FFFFFF;
  --dim: #9B9B9B;
  --gold: #E8B44F;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; min-height: 100%; }
body { padding: 16px; max-width: 720px; margin: 0 auto; }
button { font-family: inherit; }

/* top bar */
.bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--card); border: 1px solid var(--edge); border-radius: 16px; margin-bottom: 24px; }
.bar a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: 0.04em; }
.bar a span { color: var(--gold); }
.bar .stats { display: flex; gap: 16px; align-items: center; font-size: 14px; color: var(--dim); }
.bar .stats b { color: var(--ink); font-weight: 600; }
.walkbtn { background: var(--gold); color: #131209; border: 0; border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.3s var(--ease); }
.walkbtn:hover { transform: translateY(-1px); }
.walkbtn:active { transform: scale(0.98); }
.walkbtn:focus-visible, .btn:focus-visible, .pad:focus-visible, .mode button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* screens */
.screen { display: none; }
.screen.on { display: block; animation: rise 0.7s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* shelf — an actual shelving unit */
.shelfunit { position: relative; background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 24px 16px 8px; }
.shelfrow { margin-bottom: 8px; }
.shelfitems { display: flex; align-items: flex-end; justify-content: space-around; min-height: 128px; padding: 0 8px; }
.shelftoy { width: 96px; text-align: center; text-decoration: none; color: var(--ink); transition: transform 0.5s var(--ease); display: block; }
.shelftoy svg { width: 80px; height: 80px; display: block; margin: 0 auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.4)); }
a.shelftoy:hover { transform: translateY(-4px); }
a.shelftoy:active { transform: scale(0.97); }
a.shelftoy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 12px; }
.shelftoy.sheet { opacity: 0.65; }
.plate { font-size: 12px; line-height: 16px; margin-top: 4px; color: var(--dim); }
.plate b { color: var(--gold); }
.sheet .plate b { color: var(--dim); }
.plate i { display: block; font-style: normal; font-size: 12px; color: var(--dim); opacity: 0.8; }
.plank { height: 10px; border-radius: 4px; background: var(--card2); border: 1px solid var(--edge); box-shadow: 0 4px 8px rgba(0,0,0,0.35); }
/* the sleeping letter fills with gold from the bottom as votes land */
.shelftoy { position: relative; }
.shelftoy.sheet { cursor: pointer; opacity: 1; }
.shelftoy.sheet:hover { transform: translateY(-2px); }
.shelftoy.sheet svg { opacity: 0.65; }
.votefill {
  position: absolute; top: 22px; left: 0; right: 0;
  font-size: 36px; line-height: 40px; font-weight: 700; text-align: center;
  background: linear-gradient(to top, var(--gold) var(--p, 0%), #555 var(--p, 0%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none;
  transition: --p 0.7s var(--ease);
  text-shadow: none;
}
body.y90 .votefill { background: linear-gradient(to top, #a3271f var(--p, 0%), #6a6a5a var(--p, 0%)); -webkit-background-clip: text; background-clip: text; }
.mutebtn { background: transparent; border: 0; font-size: 16px; cursor: pointer; padding: 8px 2px; transition: transform 0.3s var(--ease); }
.mutebtn:active { transform: scale(0.9); }

.graves { width: 96px; text-align: center; }
.graves svg { width: 28px; height: 28px; display: inline-block; }
.gift { width: 64px; background: transparent; border: 0; cursor: pointer; text-align: center; padding: 0; transition: transform 0.5s var(--ease); font-family: inherit; }
.gift svg { width: 44px; height: 44px; display: block; margin: 0 auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4)); animation: giftwiggle 3s var(--ease) infinite; }
.gift:hover { transform: translateY(-3px); }
.gift:active { transform: scale(0.95); }
.gift:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
@keyframes giftwiggle { 0%, 88% { transform: rotate(0); } 91% { transform: rotate(-5deg); } 94% { transform: rotate(5deg); } 97% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
#wanderPet { position: absolute; width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; z-index: 2; }

/* shelf */
.hero { margin: 24px 0 32px; }
.hero h1 { font-size: 30px; line-height: 36px; font-weight: 700; background: linear-gradient(90deg, #FFFFFF, #9B9B9B); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.hero p { color: var(--dim); font-size: 16px; margin-top: 8px; max-width: 480px; text-wrap: pretty; }
.shelf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .shelf-grid { grid-template-columns: repeat(2, 1fr); } }
.toy { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 16px 12px; text-decoration: none; color: var(--ink); display: block; transition: transform 0.5s var(--ease), border-color 0.5s var(--ease); }
.toy:not(.locked):hover { transform: translateY(-3px); border-color: var(--gold); }
.toy:not(.locked):active { transform: scale(0.98); }
.toy-letter { font-size: 36px; line-height: 40px; font-weight: 700; color: var(--gold); }
.toy.locked .toy-letter { color: var(--edge); }
.toy.locked { color: var(--dim); }
.toy-name { font-size: 16px; font-weight: 600; margin-top: 8px; }
.toy-what { font-size: 12px; line-height: 16px; color: var(--dim); margin-top: 2px; min-height: 32px; }
.toy-sub { font-size: 12px; color: var(--gold); margin-top: 8px; }
.toy.locked .toy-sub { color: var(--dim); }
.shelf-foot { color: var(--dim); font-size: 14px; margin-top: 32px; text-align: center; text-wrap: pretty; }
.shelf-foot b { color: var(--ink); font-weight: 600; }

/* toy screens shared */
.toyhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.back { color: var(--dim); text-decoration: none; font-size: 14px; transition: color 0.3s var(--ease); }
.back:hover { color: var(--ink); }
.toyhead h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.toyhead h2 span { color: var(--gold); }
.mode { display: inline-flex; background: var(--card); border: 1px solid var(--edge); border-radius: 999px; padding: 2px; }
.mode button { background: transparent; color: var(--dim); border: 0; border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s var(--ease); }
.mode button.sel { background: var(--gold); color: #131209; }

.panel { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 16px; }
.statusline { color: var(--dim); font-size: 14px; min-height: 20px; margin-top: 12px; }
.btnrow { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.btn { background: var(--card2); color: var(--ink); border: 1px solid var(--edge); border-radius: 12px; padding: 8px 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s var(--ease); }
.btn:hover { border-color: var(--dim); }
.btn:active { transform: scale(0.98); }
.btn.gold { background: var(--gold); color: #131209; border-color: var(--gold); }
.btn.dim { color: var(--dim); }
.input { background: var(--card2); border: 1px solid var(--edge); color: var(--ink); border-radius: 12px; padding: 8px 12px; font-size: 16px; font-family: inherit; }
.input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

/* upkeep */
#petCanvas { width: 100%; max-width: 320px; height: 240px; display: block; margin: 0 auto; border-radius: 12px; image-rendering: pixelated; }
.meters { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 16px auto 0; }
.meter { background: var(--card2); border-radius: 999px; height: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width 0.7s var(--ease); }
.meter-label { font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; }
.agebadge { text-align: center; color: var(--dim); font-size: 12px; margin-top: 8px; }

/* recall */
.simon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 320px; margin: 0 auto; }
.pad { border: 0; border-radius: 16px; height: 96px; cursor: pointer; opacity: 0.35; transition: opacity 0.15s ease, transform 0.15s ease; }
.pad.lit { opacity: 1; transform: scale(1.03); }
.pad:active { transform: scale(0.97); }
#pad0 { background: #2f9e44; border-top-left-radius: 96px; }
#pad1 { background: #e03131; border-top-right-radius: 96px; }
#pad2 { background: #f8d227; border-bottom-left-radius: 96px; }
#pad3 { background: #1971c2; border-bottom-right-radius: 96px; }
.moodline { color: var(--gold); font-size: 14px; min-height: 20px; margin-bottom: 12px; text-align: center; text-wrap: pretty; }
#recallOver { color: var(--ink); font-size: 14px; margin-top: 8px; min-height: 20px; text-align: center; text-wrap: pretty; }
#recallStatus { text-align: center; }

/* tell */
.tellscreen { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px 16px; }
#tellText { font-size: 20px; line-height: 28px; font-weight: 600; max-width: 420px; text-wrap: balance; }
#tellCount { color: var(--dim); font-size: 12px; }
.tellscreen.lcd85 { background: #200; border-radius: 12px; }
.tellscreen.lcd85 #tellText { color: #ff4136; font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase; font-size: 16px; line-height: 24px; }

/* walk modal */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(24px); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal.on { display: flex; }
.modal .panel { max-width: 380px; width: 100%; text-align: center; }
.modal h3 { font-size: 20px; line-height: 28px; margin-bottom: 8px; }
#walkLive { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--gold); min-height: 32px; margin: 12px 0; }
#walkHint { color: var(--dim); font-size: 14px; min-height: 40px; text-wrap: pretty; }

/* toast */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 80px); background: var(--card2); border: 1px solid var(--edge); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 14px; transition: transform 0.5s var(--ease); z-index: 20; }
#toast.on { transform: translate(-50%, 0); }

footer { margin-top: 48px; text-align: center; color: var(--dim); font-size: 12px; }
footer a { color: var(--dim); }

/* ============ 1990 — flip the year, flip the world ============ */
body.y90 { background: #d4c8a8; color: #131209; font-family: 'VT323', monospace; font-size: 20px; }
body.y90::after { /* CRT scanlines over everything */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 1px, transparent 1px, transparent 3px);
}
body.y90 .bar { background: #b8ac8c; border: 2px solid #131209; border-radius: 8px; box-shadow: 3px 3px 0 #131209; }
body.y90 .bar a { font-family: 'Press Start 2P', monospace; font-size: 12px; color: #131209; }
body.y90 .bar a span { color: #a3271f; }
body.y90 .bar .stats { color: #4a4a3a; }
body.y90 .bar .stats b { color: #131209; }
body.y90 .walkbtn { background: #a3271f; color: #f0e8d0; border-radius: 6px; border: 2px solid #131209; box-shadow: 2px 2px 0 #131209; }
body.y90 .walkbtn:active { box-shadow: 0 0 0 #131209; transform: translate(2px,2px); }
body.y90 .mode { background: #c4b898; border: 2px solid #131209; border-radius: 6px; }
body.y90 .mode button { color: #4a4a3a; border-radius: 4px; font-family: inherit; font-size: 16px; }
body.y90 .mode button.sel { background: #131209; color: #f8d227; }
body.y90 .hero h1 { font-family: 'Press Start 2P', monospace; font-size: 18px; line-height: 32px; background: none; color: #131209; -webkit-text-fill-color: currentColor; }
body.y90 .hero p { color: #4a4a3a; font-size: 20px; }
body.y90 .hero p b { color: #131209; }
body.y90 .panel, body.y90 .shelfunit { background: #c4b898; border: 2px solid #131209; border-radius: 8px; box-shadow: 4px 4px 0 #131209; }
body.y90 .shelfunit { background:
  linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.02)), #b08d57; }
body.y90 .plank { background: repeating-linear-gradient(90deg, #8a6a3f 0, #8a6a3f 34px, #97764a 34px, #97764a 70px); border: 2px solid #5e4629; border-radius: 2px; height: 12px; }
body.y90 .plate { font-size: 16px; color: #3a2e1c; }
body.y90 .plate b { color: #a3271f; }
body.y90 .plate i { color: #5e4629; font-size: 14px; }
body.y90 .toyhead h2 { font-family: 'Press Start 2P', monospace; font-size: 16px; }
body.y90 .toyhead h2 span { color: #a3271f; }
body.y90 .back { color: #4a4a3a; font-size: 18px; }
body.y90 .btn { background: #d4c8a8; color: #131209; border: 2px solid #131209; border-radius: 6px; box-shadow: 2px 2px 0 #131209; font-family: inherit; font-size: 18px; }
body.y90 .btn:active { box-shadow: 0 0 0 #131209; transform: translate(2px,2px); }
body.y90 .btn.gold { background: #f8d227; }
body.y90 .btn.dim { color: #4a4a3a; }
body.y90 .input { background: #f0e8d0; color: #131209; border: 2px solid #131209; border-radius: 6px; font-family: inherit; font-size: 18px; }
body.y90 .statusline, body.y90 .moodline, body.y90 .agebadge, body.y90 .meter-label, body.y90 .shelf-foot, body.y90 #recallOver, body.y90 footer { color: #4a4a3a; }
body.y90 .shelf-foot b { color: #131209; }
body.y90 .meter { background: #a89c7c; border: 1px solid #131209; }
body.y90 .meter i { background: #a3271f; }
body.y90 .pad { border: 2px solid #131209; }
body.y90 #tellText { font-family: inherit; font-size: 24px; line-height: 30px; }
body.y90 .modal .panel { box-shadow: 6px 6px 0 #131209; }
body.y90 #walkLive { color: #a3271f; }
body.y90 #toast { background: #f0e8d0; color: #131209; border: 2px solid #131209; }
body.y90 .screen.on { animation: none; }

/* boot: the CRT power-on */
#boot { position: fixed; inset: 0; background: #000; z-index: 100; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 24px; }
#boot.on { display: flex; animation: bootflicker 1.9s steps(1) forwards; }
.boot-line { width: 100%; height: 2px; background: #fff; animation: bootline 0.5s var(--ease) forwards; }
.boot-text { font-family: 'Press Start 2P', monospace; color: #f8d227; font-size: 14px; opacity: 0; animation: boottext 1.4s 0.5s steps(1) forwards; }
@keyframes bootline { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1) scaleY(60); opacity: 0.12; } }
@keyframes boottext { 0% { opacity: 1; } 20% { opacity: 0.3; } 30% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bootflicker { 0% { opacity: 1; } 80% { opacity: 1; } 88% { opacity: 0.4; } 94% { opacity: 0.9; } 100% { opacity: 0; visibility: hidden; } }