@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Rajdhani:wght@300;400;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--bg:#020a2e;--text:#e8e0f0;--muted:#8894b8;--cyan:#00e5ff;--back-h:52px;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);-webkit-tap-highlight-color:transparent;}
@media(pointer:fine){body{cursor:none;}}
canvas#bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
@media(pointer:fine){
  body::after{content:'';position:fixed;width:8px;height:8px;background:var(--cyan);box-shadow:0 0 8px rgba(0,229,255,.9),0 0 16px rgba(0,180,255,.5);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:9000;left:var(--cx,-100px);top:var(--cy,-100px);}
  body::before{content:'';position:fixed;width:32px;height:32px;border:1px solid rgba(0,229,255,.4);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);z-index:8999;left:var(--cx2,-100px);top:var(--cy2,-100px);}
  button,a{cursor:pointer!important;}
}

/* ── Back button ── */
.back-btn{
  position:fixed;top:1rem;left:1rem;z-index:700;
  display:flex;align-items:center;gap:.55rem;
  background:rgba(0,8,30,.55);border:1px solid rgba(0,229,255,.28);
  color:rgba(0,220,255,.85);
  font-family:'Rajdhani',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.28em;
  padding:.42rem .85rem .42rem .6rem;border-radius:2px;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  box-shadow:0 0 14px rgba(0,180,255,.08),inset 0 0 12px rgba(0,100,255,.04);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  clip-path:polygon(0 6px,6px 0,100% 0,100% 100%,0 100%);
}
.back-btn::before{content:'';position:absolute;top:2px;left:2px;width:7px;height:7px;border-top:1px solid rgba(0,229,255,.6);border-left:1px solid rgba(0,229,255,.6);}
.back-btn::after{content:'';position:absolute;bottom:2px;right:2px;width:7px;height:7px;border-bottom:1px solid rgba(0,229,255,.6);border-right:1px solid rgba(0,229,255,.6);}
.back-btn:hover{background:rgba(0,20,60,.7);border-color:rgba(0,229,255,.65);color:#00e5ff;box-shadow:0 0 22px rgba(0,200,255,.22),inset 0 0 14px rgba(0,140,255,.08);}
.back-btn:active{background:rgba(0,30,80,.8);}
.back-icon{width:22px;height:22px;flex-shrink:0;}
.back-label{line-height:1;position:relative;top:.5px;}
.back-btn.hidden{display:none;}

/* ── Panels ── */
.tab-panel{position:fixed;inset:0;z-index:10;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;}
.tab-panel.active{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s;}

/* ── Home ── */
#tab-home main{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;pointer-events:none;}
.wordmark{pointer-events:none;position:absolute;top:1.6rem;left:1.8rem;font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1.3rem,3vw,2rem);letter-spacing:.01em;word-spacing:-.15em;display:flex;align-items:baseline;line-height:1;opacity:0;animation:fadeUp 2s ease both;}
.wordmark .brand{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.9),0 0 30px rgba(180,210,255,.6),0 0 60px rgba(100,160,255,.4);}
.wordmark .tld{font-size:clamp(.7rem,1.5vw,1rem);color:var(--cyan);text-shadow:0 0 8px rgba(0,229,255,.9),0 0 20px rgba(0,180,255,.7);margin-left:1px;position:relative;top:-.05em;}
.wordmark::after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(0,229,255,.5),transparent);}
.center{pointer-events:auto;text-align:center;display:flex;flex-direction:column;align-items:center;opacity:0;animation:fadeUp 2.2s cubic-bezier(.16,1,.3,1) .2s both;}
h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(3.5rem,12vw,7rem);color:var(--text);line-height:1;text-shadow:0 0 60px rgba(0,180,255,.4),0 0 120px rgba(30,100,255,.2);}
.sub{margin-top:1.2rem;font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1rem,3vw,1.15rem);color:var(--muted);letter-spacing:.08em;}
.btn-row{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.7rem;margin-top:2.4rem;flex-wrap:wrap;}
.home-btn{pointer-events:auto;font-family:'Rajdhani',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:.6rem 1.3rem;border-radius:2px;display:inline-flex;align-items:center;gap:.38rem;transition:box-shadow .2s,border-color .2s,background .2s;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;}
.btn-star{font-size:.8rem;pointer-events:none;}
.drift-btn{background:rgba(0,20,40,.5);border:1px solid rgba(0,229,255,.45);color:var(--cyan);text-shadow:0 0 10px rgba(0,229,255,.6);box-shadow:0 0 16px rgba(0,229,255,.08);}
.drift-btn:hover{background:rgba(0,40,70,.6);border-color:rgba(0,229,255,.9);box-shadow:0 0 24px rgba(0,229,255,.25);}
.drift-btn:active{background:rgba(0,60,90,.7);}
.oracle-btn{background:rgba(20,0,50,.4);border:1px solid rgba(120,60,220,.4);color:rgba(170,110,255,.9);text-shadow:0 0 10px rgba(120,60,255,.5);box-shadow:0 0 16px rgba(80,0,180,.08);}
.oracle-btn:hover{background:rgba(40,0,90,.55);border-color:rgba(160,80,255,.75);box-shadow:0 0 24px rgba(120,0,255,.22);}
.oracle-btn:active{background:rgba(60,0,120,.7);}
.void-btn{background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);color:rgba(160,160,180,.6);}
.void-btn:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.2);color:rgba(200,200,220,.8);box-shadow:0 0 20px rgba(255,255,255,.04);}
.void-btn:active{background:#000;}
.flame-btn{background:rgba(0,10,30,.5);border:1px solid rgba(80,180,255,.35);color:rgba(140,200,255,.85);text-shadow:0 0 10px rgba(80,160,255,.5);box-shadow:0 0 16px rgba(0,100,255,.07);}
.flame-btn:hover{background:rgba(0,25,55,.6);border-color:rgba(100,200,255,.7);box-shadow:0 0 22px rgba(0,140,255,.2);}
.flame-btn:active{background:rgba(0,35,70,.7);}

/* ── Drift ── */
.drift-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(var(--back-h) + .4rem) .4rem .3rem;}
.game-topbar{width:100%;display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;padding-bottom:.25rem;}
.game-scores{font-family:'Rajdhani',sans-serif;font-size:.78rem;letter-spacing:.18em;color:rgba(0,229,255,.75);}
#gameCanvas{display:block;max-width:none;border:1px solid rgba(0,229,255,.18);border-radius:3px;box-shadow:0 0 50px rgba(0,100,255,.2);touch-action:none;}
.game-hint{font-family:'Rajdhani',sans-serif;font-size:.72rem;letter-spacing:.15em;color:rgba(255,255,255,.3);text-transform:uppercase;flex-shrink:0;padding:.35rem 0;}
.game-hint kbd{font-family:inherit;background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);border-radius:3px;padding:0 4px;color:rgba(0,229,255,.7);}
.hint-mobile{display:none;}.hint-desktop{display:inline;}

/* ── Oracle ── */
#tab-river{background:#000510;}
#riverCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
#oracle-ui{position:absolute;bottom:0;left:0;right:0;height:46%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem 1.8rem 1.6rem;gap:.85rem;pointer-events:auto;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,2,15,.88) 28%,rgba(0,2,15,.97) 100%);}
#oracle-answer-wrap{width:100%;max-width:680px;min-height:4em;display:flex;align-items:center;justify-content:center;flex:1;}
#oracle-answer{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1.2rem,3.2vw,1.65rem);color:rgba(200,235,255,0);text-align:center;line-height:1.75;letter-spacing:.02em;text-shadow:0 0 40px rgba(60,160,255,.6),0 0 80px rgba(0,100,200,.3);transition:color 1.2s ease;max-width:680px;}
#oracle-answer.visible{color:rgba(220,242,255,.96);}
/* oracle-input-wrap removed */
/* oracle-input removed */



#oracle-submit{background:rgba(0,20,55,.6);border:1px solid rgba(0,200,255,.5);color:rgba(180,225,255,.95);font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:clamp(1rem,2.4vw,1.25rem);letter-spacing:.06em;padding:.85rem 2.4rem;border-radius:2px;white-space:nowrap;transition:background .2s,border-color .2s,box-shadow .2s,opacity .4s;-webkit-tap-highlight-color:transparent;cursor:pointer;text-align:center;line-height:1.3;min-width:260px;}
#oracle-submit:hover:not(:disabled){background:rgba(0,40,90,.7);border-color:rgba(0,230,255,.85);box-shadow:0 0 24px rgba(0,180,255,.25);}
#oracle-submit:disabled{cursor:default;}
#oracle-hint{font-family:'Rajdhani',sans-serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,160,220,.55);}
#oracle-countdown{display:none;} /* countdown now lives inside the button */

/* ── Void ── */
#tab-void{background:#000;}
#tab-flame{background:#000;}
#flameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
#voidCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* ── Mobile ── */
@media(max-width:600px){
  :root{--back-h:46px;}
  .wordmark{font-size:6vw;top:1.2rem;left:1.2rem;}
  .wordmark .tld{font-size:3.5vw;}
  h1{font-size:clamp(3.2rem,16vw,5rem);}
  .sub{font-size:clamp(1rem,4.5vw,1.3rem);margin-top:1rem;padding:0 .5rem;}
  .btn-row{gap:.5rem;margin-top:1.6rem;}
  .home-btn{font-size:.65rem;padding:.55rem 1rem;}
  .hint-desktop{display:none;}.hint-mobile{display:inline;}
  .drift-inner{padding:calc(var(--back-h) + .3rem) .2rem .3rem;}
  .back-btn{top:.7rem;left:.7rem;}
  #oracle-ui{padding:1rem 1rem 1.2rem;gap:.7rem;}
  #oracle-answer{font-size:clamp(1.05rem,4.2vw,1.3rem);}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}