/* Pixel-fantasy rebrand (Oct 23): loaded after style.css; overrides colours, font, buttons and panels. */
@font-face { font-family: 'Pixelify Sans'; src: url('fonts/pixelify.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
:root { --bg: #1b140f; --sf: #2c2017; --sf2: #3a2a1d; --line: #6b4a2b; --mut: #e2cfa8; --acc: #ffd166; --r: 6px; --wood: #8a5a2b; --woodL: #c8894a; --woodD: #4a2c12; --ink: #1c120a; --gold: #f6c453; --goldD: #b9781f; }
html, body { background: #120d09; font-family: 'Pixelify Sans', system-ui, sans-serif; }
body { -webkit-font-smoothing: none; }
/* panels: dark wood with a pixel bevel */
button, .btn { background: var(--sf); border: 3px solid var(--ink) !important; border-radius: 4px; box-shadow: inset 2px 2px 0 #4c3826, inset -2px -2px 0 #1e150d; color: #f8ecd4; font-weight: 600; letter-spacing: .3px; }
button:hover, .btn:hover { transform: translateY(-1px); }
button.ghost, .btn.ghost { box-shadow: none; border-color: transparent !important; background: none; color: var(--mut); }
button.danger { color: #ff9a8a; background: #3a1712; }
button.tiny { box-shadow: none; border-width: 2px !important; }
/* the big call-to-action: a chunky gold pixel button */
button.big, button.big.ten { background: #f6c453 !important; color: #1c120a; border: 4px solid var(--ink) !important; border-radius: 4px; text-shadow: 0 2px 0 #fff3c4; font-weight: 700; letter-spacing: 2px;
  box-shadow: inset 4px 4px 0 #ffe7a0, inset -4px -4px 0 var(--goldD), 0 5px 0 var(--ink); }
button.big:active { transform: translateY(3px); box-shadow: inset 4px 4px 0 #ffe7a0, inset -4px -4px 0 var(--goldD), 0 2px 0 var(--ink); }
#playBtn { animation: pxbob 1.4s steps(2) infinite; }
@keyframes pxbob { 50% { transform: translateY(-3px); } }
/* title screen: pixel valley scene, pixel wordmark */
#title { background: linear-gradient(to bottom, rgba(18,13,9,0) 40%, rgba(18,13,9,.55) 70%, rgba(18,13,9,.92) 100%), url('img/ui/title.webp') center 30% / cover no-repeat; image-rendering: pixelated; }
#title .logo .applogo { display: none; }
#title .logo h1 { font-family: 'Pixelify Sans', system-ui; font-style: normal; font-weight: 700; font-size: 58px; line-height: .95; letter-spacing: 3px; background: none; -webkit-background-clip: initial; background-clip: initial; color: #ffe08a; animation: none;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 0 7px 0 #8a4b14, 3px 7px 0 var(--ink), -3px 7px 0 var(--ink), 0 10px 0 var(--ink); }
#title .logo .withads { font-family: 'Pixelify Sans', system-ui; background: var(--sf) !important; color: #ffe9bf !important; border: 3px solid var(--ink); border-radius: 3px; transform: rotate(-2deg); box-shadow: inset 2px 2px 0 #4c3826; padding: 3px 10px; font-weight: 600; }
#title .logo .withads b { color: #ff9a5a; }
#title #rankCard, #title .sec2 > *, .tabbar { background: rgba(44,32,23,.94) !important; border: 3px solid var(--ink) !important; border-radius: 4px !important; box-shadow: inset 2px 2px 0 #4c3826, inset -2px -2px 0 #1e150d; }
.tabbar span { color: #f2dfb6; font-weight: 600; }
.sheetin { background: var(--sf); border: 3px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; }
/* screens that used the dark-blue space background now sit on dark wood */
.screen:not(#title) { background: linear-gradient(#211811, #150f0a); }
#banner { background: #1c140e; border-top: 3px solid var(--ink); color: #e9d6b0; font-family: 'Pixelify Sans', system-ui; }
/* leftover cyan/purple accents -> warm gold */
.rankcard { background: none !important; border: 0 !important; }
.rankcard .rk b { background: none; -webkit-background-clip: initial; background-clip: initial; color: #ffd166; }
.xpbar { background: #120d09; border: 2px solid var(--ink); border-radius: 2px; } .xpbar > div { background: linear-gradient(#ffd166, #e0952a); border-radius: 0; }
#title .sec2 > .hidden { display: none !important; }