@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap";:root{--accent:#c88c1e;--accent-rgb:200, 140, 30;--accent-light:#e0ad45;--accent-light-rgb:224, 173, 69;--accent-dim:#916514;--accent-foreground:#1a0e05;--accent-readable:#c88c1e;--bg:#eee6d2;--surface:#f4efe1;--card:#faf7f0;--border:#d4c4a0;--border-mid:#c0aa7a;--border-light:#9a7f48;--gold:#8b5a1f;--gold-light:#a06a2a;--cream:#2e1c0f;--cream-mid:#4a3320;--cream-dim:#6b5540;--text-dim:#8a7355;--green:#dcead9;--green-mid:#6a9e6f;--green-light:#3a6b40;--green-bright:#255030;--red:#f5dcdc;--red-mid:#b56a6a;--red-light:#8e3838;--red-bright:#5e1e1e;--amber:#f0e0c0;--amber-light:#8a5a1e;--paper:#f5ecda;--paper-ink:#3a2512;--paper-line:#c8b280}[data-theme=dark]{--bg:#0c0703;--surface:#160d05;--card:#1d1308;--border:#33200e;--border-mid:#4a2e14;--border-light:#5e3c1a;--gold:#c88c1e;--gold-light:#e8b048;--cream:#f5e8cc;--cream-mid:#c8aa78;--cream-dim:#b08040;--text-dim:#7a5530;--green:#244f32;--green-mid:#3a7a4e;--green-light:#52a468;--green-bright:#70d888;--red:#5e1e1e;--red-mid:#8e3838;--red-light:#b85050;--red-bright:#e07878;--amber:#7e4a0e;--amber-light:#c07828;--paper:#e8d7a8;--paper-ink:#3a2512;--paper-line:#c8b280}*,:before,:after{box-sizing:border-box}html{overflow-x:hidden}body{background-color:var(--bg);color:var(--cream);background-image:radial-gradient(80% 40% at 50% 0,#b45a140a 0%,#0000 70%),radial-gradient(60% 50% at 90% 100%,#8c460a08 0%,#0000 60%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");background-attachment:fixed;min-height:100vh;margin:0;font-family:Lora,Georgia,serif;font-weight:500}[data-theme=dark] body{background-image:radial-gradient(80% 40% at 50% 0,#b45a141f 0%,#0000 70%),radial-gradient(60% 50% at 90% 100%,#8c460a14 0%,#0000 60%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes steamRise{0%{opacity:.7;transform:translateY(0)scaleX(1)}50%{opacity:.4;transform:translateY(-8px)scaleX(1.3)}to{opacity:0;transform:translateY(-16px)scaleX(.8)}}@keyframes steamRiseOnce{0%{opacity:.85;transform:translateY(0)scaleX(1)}40%{opacity:.5;transform:translateY(-28px)scaleX(1.5)}to{opacity:0;transform:translateY(-80px)scaleX(.7)}}@keyframes bubbleIn{0%{opacity:0;transform:scale(.5)translate(-10px)}70%{transform:scale(1.05)translate(2px)}to{opacity:1;transform:scale(1)translate(0)}}@keyframes flipCard{0%{transform:perspective(600px)rotateY(0)}to{transform:perspective(600px)rotateY(180deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.anim-fadeUp{animation:.35s both fadeUp}.anim-pop{animation:.3s cubic-bezier(.34,1.56,.64,1) both pop}.anim-bubbleIn{animation:.4s cubic-bezier(.34,1.56,.64,1) both bubbleIn}.shimmer-text{background:linear-gradient(90deg,#c88c1e 20%,#e8b048 40%,#fffbe0 50%,#e8b048 60%,#c88c1e 80%) 0 0/200%;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;animation:2s linear infinite shimmer}.steam-particle{background:#eedab080;border-radius:2px;width:3px;animation:1.8s ease-in infinite steamRise;display:inline-block}.steam-particle:nth-child(2){animation-delay:.6s}.steam-particle:nth-child(3){animation-delay:1.2s}@keyframes confettiFall{0%{opacity:1;transform:translateY(-10px)rotate(0)}to{opacity:0;transform:translateY(300px)rotate(720deg)}}.confetti-piece{animation:1.8s ease-in both confettiFall}@keyframes holoShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes tutorialSlideIn{0%{opacity:0;transform:translate(-130%)}to{opacity:1;transform:translate(0)}}@keyframes tutorialBob{0%,to{transform:translate(0)translateY(0)}50%{transform:translate(0)translateY(-6px)}}@keyframes tutorialRingPulse{0%,to{box-shadow:0 0 0 3px #c88c1eb3,0 0 12px #c88c1e40}50%{box-shadow:0 0 0 5px #c88c1e66,0 0 20px #c88c1e26}}.game-step{border-left:2px solid rgba(var(--accent-rgb), .15);margin-left:4px;position:relative}.game-step:before{content:"";background:rgba(var(--accent-rgb), .2);border:1.5px solid rgba(var(--accent-rgb), .35);box-sizing:border-box;border-radius:50%;width:8px;height:8px;position:absolute;top:14px;left:-5px}.game-step-active{border-left-color:rgba(var(--accent-rgb), .55)}.game-step-active:before{background:rgba(var(--accent-rgb), .75);border-color:rgba(var(--accent-rgb), .9);box-shadow:0 0 6px rgba(var(--accent-rgb), .45)}.btn-primary{background:linear-gradient(160deg, rgba(var(--accent-light-rgb), 1) 0%, rgba(var(--accent-rgb), 1) 100%);border:1px solid rgba(var(--accent-light-rgb), .6);color:var(--accent-foreground);box-shadow:inset 0 1px 0 #ffd26440, inset 0 -1px 0 #0003, 0 3px 10px rgba(var(--accent-rgb), .4);transition:all .15s}.btn-primary:not(:disabled):hover{background:linear-gradient(160deg, rgba(var(--accent-light-rgb), 1) 0%, rgba(var(--accent-rgb), .85) 100%);box-shadow:inset 0 1px 0 #ffd2644d, inset 0 -1px 0 #0003, 0 4px 16px rgba(var(--accent-rgb), .55);transform:translateY(-1px)}.btn-primary:not(:disabled):active{box-shadow:inset 0 1px 0 #ffd26426, inset 0 -1px 0 #0003, 0 1px 4px rgba(var(--accent-rgb), .3);transform:translateY(1px)}.btn-primary:disabled{opacity:.5;cursor:default}.card-surface{background:var(--card);border:1px solid rgba(var(--accent-rgb), .15);box-shadow:inset 0 1px 0 rgba(var(--accent-rgb), .08), 0 2px 12px #00000059, 0 0 0 1px #0003}.counter-divider{justify-content:center;align-items:center;height:32px;margin:28px 0 20px;display:flex;position:relative}.counter-edge{background:linear-gradient(180deg, var(--border-mid) 0%, var(--border) 100%);height:12px;box-shadow:0 -2px 8px #00000080, 0 4px 12px #000000b3, inset 0 1px 0 rgba(var(--accent-rgb), .08);border-top:2px solid #502d0acc;border-bottom:3px solid #000000e6;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.counter-surface{z-index:1;background:var(--card);letter-spacing:2px;text-transform:uppercase;color:rgba(var(--accent-rgb), .6);border:1px solid #502d0a99;border-radius:3px;padding:3px 16px;font-family:Lora,serif;font-size:10px;position:relative}.tutorial-toast{animation:.45s cubic-bezier(.34,1.56,.64,1) both tutorialSlideIn,2.2s ease-in-out .5s infinite tutorialBob}.tutorial-ring{border-radius:8px;animation:1.6s ease-in-out infinite tutorialRingPulse}@keyframes slideUp{0%{transform:translate(-50%)translateY(100%)}to{transform:translate(-50%)translateY(0)}}.anim-slideUp{animation:.3s cubic-bezier(.34,1.56,.64,1) both slideUp}.doyle-highlight{animation:1.6s ease-in-out infinite tutorialRingPulse}@keyframes flashGold{0%{opacity:1}to{opacity:0}}@keyframes glowInSilver{0%{box-shadow:0 0 #c8c8c800}55%{box-shadow:0 0 22px #c8c8c866}to{box-shadow:0 0 #c8c8c800}}@keyframes stampDrop{0%{opacity:0;transform:scale(1.4)translateY(-22px)}65%{opacity:1;transform:scale(.92)translateY(0)}82%{transform:scale(1.05)translateY(0)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes sparkleOut{0%{opacity:1;transform:scale(1.3)}to{opacity:0;transform:scale(0)}}@keyframes drawLatte{to{stroke-dashoffset:0}}.anim-enter-bronze,.anim-enter-gold,.anim-enter-holo{animation:.3s cubic-bezier(.34,1.56,.64,1) both pop}.anim-enter-silver{animation:.3s cubic-bezier(.34,1.56,.64,1) both pop,.8s .1s both glowInSilver}.anim-stamp{animation:.45s cubic-bezier(.34,1.56,.64,1) .35s both stampDrop}.anim-sparkle{animation:.7s ease-out both sparkleOut}@keyframes shake{0%{transform:translate(0)}15%{transform:translate(-4px)}35%{transform:translate(4px)}50%{transform:translate(-3px)}65%{transform:translate(3px)}80%{transform:translate(-1px)}95%{transform:translate(1px)}to{transform:translate(0)}}.anim-shake{animation:.4s ease-out both shake}@keyframes idleBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.anim-idle{animation:2.4s ease-in-out infinite idleBob}
