:root{
  --sea1:#121626; --sea2:#1d2740; --sea3:#2b3a5c;
  --panel:#161a2b; --panel2:#1e2440;
  --gold:#e9c268; --gold-dim:#b8933f;
  --ink:#e9ecf5; --muted:#95a0c0;
  --danger:#d6604d; --good:#69c08a;
  --trap:#e9c268; --nm:#b0788f;
  --card-w:96px; --card-h:132px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #33406b 0%, #1a2038 45%, #0d1020 100%);
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;}
.hidden{display:none !important;}

/* ============ SETUP SCREEN ============ */
#setup{overflow-y:auto; align-items:center;}
.setup-inner{max-width:520px;width:100%;padding:32px 22px calc(40px + var(--safe-b));text-align:center;margin:auto;}
.title-art{position:relative;padding:18px 0 6px;}
.title-glow{
  position:absolute;left:50%;top:44%;width:180px;height:180px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(233,194,104,.5), rgba(233,194,104,0) 70%);
  filter:blur(6px);pointer-events:none;animation:beam 4s ease-in-out infinite;
}
@keyframes beam{0%,100%{opacity:.55}50%{opacity:1}}
h1{
  position:relative;font-size:clamp(38px,12vw,60px);line-height:.92;margin:0;
  font-family:Georgia,"Times New Roman",serif;font-weight:800;letter-spacing:.5px;
  color:#f3e6c9;text-shadow:0 2px 0 #6b5326,0 0 30px rgba(233,194,104,.35);
}
h1 span{color:var(--gold);}
.subtitle{color:var(--muted);font-size:14px;margin:12px 0 0;letter-spacing:.3px;}
.flavor{color:#c3cbe4;font-size:15px;line-height:1.6;margin:26px auto 8px;font-style:italic;max-width:440px;}
.pick{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--gold-dim);margin:30px 0 14px;}
#difficulty-list{display:flex;flex-direction:column;gap:10px;}
.diff-btn{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid #34406a;border-radius:14px;padding:14px 16px;color:var(--ink);
  cursor:pointer;transition:transform .08s, border-color .15s;
}
.diff-btn:active{transform:scale(.98);}
.diff-btn:hover{border-color:var(--gold-dim);}
.diff-name{font-size:17px;font-weight:700;}
.diff-desc{font-size:12.5px;color:var(--muted);margin-top:2px;}
.diff-badge{margin-left:auto;text-align:right;font-size:12px;color:var(--muted);white-space:nowrap;}
.diff-badge b{color:var(--ink);}
.ghost-btn{
  margin-top:22px;background:transparent;border:1px solid #3a456e;color:var(--muted);
  padding:11px 20px;border-radius:10px;font-size:14px;cursor:pointer;
}

/* ============ TOP BAR ============ */
#topbar{
  display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  background:linear-gradient(180deg,rgba(10,13,26,.9),rgba(10,13,26,0));
  z-index:5;
}
.icon-btn{
  background:rgba(255,255,255,.06);border:1px solid #333c60;color:var(--ink);
  width:38px;height:38px;border-radius:10px;font-size:18px;cursor:pointer;flex:none;
  transition:transform .08s, opacity .15s;
}
.icon-btn.muted{opacity:.5;}
#health-wrap{display:flex;align-items:center;gap:7px;flex:1;min-width:0;}
.hp-flame{font-size:20px;filter:drop-shadow(0 0 6px rgba(233,194,104,.8));}
#hearts{display:flex;gap:3px;flex-wrap:wrap;}
.pip{width:15px;height:15px;border-radius:50%;transition:all .3s;}
.pip.on{background:radial-gradient(circle at 35% 30%,#ffe6a3,#e9a12b);box-shadow:0 0 8px rgba(233,161,43,.7);}
.pip.off{background:#2a3150;box-shadow:inset 0 0 4px #0007;}
#round-info{display:flex;gap:14px;font-size:12px;text-align:right;flex:none;}
#round-info .lbl{color:var(--muted);display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;}
#round-info b{font-size:16px;color:var(--gold);}

/* ============ PHASE BANNER ============ */
#phase-banner{
  text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);padding:2px 0 6px;min-height:20px;font-weight:600;
}

/* ============ BOARD / SEA ============ */
#board{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;position:relative;}
#sea-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:8px 0;}
#sea-row{display:flex;align-items:center;gap:0;padding:0 14px;min-width:min-content;}
#lighthouse-slot{position:relative;flex:none;width:78px;margin-right:6px;}
#lighthouse-img{width:78px;border-radius:8px;display:block;box-shadow:0 0 22px rgba(233,194,104,.25),0 4px 12px #0008;}
#lighthouse-slot.lh-flash{animation:hurt .5s;}
@keyframes hurt{0%,100%{filter:none}30%{filter:drop-shadow(0 0 10px var(--danger)) brightness(1.3)}}
#lh-hp{text-align:center;font-size:12px;color:var(--gold);margin-top:3px;font-weight:700;}
#sea{display:flex;align-items:center;gap:0;}

.card{
  flex:none;width:var(--card-w);height:var(--card-h);border-radius:8px;position:relative;
  background-size:cover;background-position:center;cursor:pointer;
  box-shadow:0 3px 8px #0007;transition:transform .12s, box-shadow .15s, margin .15s;
  margin:0 3px;
}
.card.nightmare{border:2px solid #6e4658;}
.card.trap{border:2px solid var(--gold-dim);transform:rotate(180deg);}
.card.trap.sel,.card.nightmare.sel{}
.card .badge{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-size:10px;padding:1px 7px;border-radius:8px;font-weight:700;white-space:nowrap;
  box-shadow:0 1px 3px #0009;z-index:2;
}
.card.trap .badge{transform:translateX(-50%) rotate(180deg);top:auto;bottom:-8px;}
.card.nightmare .badge{background:#6e4658;color:#ffdce9;}
.card.trap .badge,.card.trap-hand .badge{background:var(--gold-dim);color:#1a1405;}
.card .rng{
  position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  font-size:9px;background:#0b0e1c;border:1px solid #38426a;border-radius:7px;padding:1px 6px;
  color:var(--muted);white-space:nowrap;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
}
.card.trap .rng{transform:translateX(-50%) rotate(180deg);bottom:auto;top:-7px;}
.card.targetable{box-shadow:0 0 0 3px var(--good),0 0 14px var(--good);cursor:pointer;animation:pulse 1.1s infinite;}
.card.targetable.bad{box-shadow:0 0 0 3px var(--danger),0 0 14px var(--danger);}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.card.sel{box-shadow:0 0 0 3px var(--gold),0 0 16px var(--gold);transform:translateY(-6px);}
.card.trap.sel{transform:rotate(180deg) translateY(-6px);}
.card.inrange{box-shadow:0 0 0 2px #4a8fd6,0 0 10px #4a8fd6;}
.card.dying{animation:die .45s forwards;}
@keyframes die{to{transform:scale(.2) rotate(40deg);opacity:0;}}
.card.entering{animation:enter .4s;}
@keyframes enter{from{transform:translateY(-40px) scale(.6);opacity:0;}}

.slot{
  flex:none;width:16px;height:var(--card-h);border-radius:6px;margin:0 -2px;
  display:flex;align-items:center;justify-content:center;
}
.slot.active{width:34px;background:rgba(105,192,138,.12);border:2px dashed var(--good);cursor:pointer;}
.slot.active::after{content:"+";color:var(--good);font-size:20px;font-weight:700;}

.empty-sea{color:var(--muted);font-style:italic;padding:0 20px;font-size:13px;}

/* ============ PROMPT BAR ============ */
#prompt-bar{
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:rgba(233,194,104,.12);border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--gold-dim);
  padding:8px 14px;font-size:13.5px;color:#ffedc4;text-align:center;
}
#prompt-cancel{background:#3a2f14;color:var(--gold);border:1px solid var(--gold-dim);border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer;flex:none;}

/* ============ HAND ============ */
#hand-area{background:linear-gradient(0deg,rgba(8,10,20,.85),rgba(8,10,20,.4));padding:6px 0 2px;}
#hand-header{display:flex;justify-content:space-between;align-items:center;padding:2px 16px 4px;font-size:12px;color:var(--muted);}
#hand-header b{color:var(--gold);}
#actions-pill{color:var(--ink);background:rgba(255,255,255,.07);border:1px solid #333c60;border-radius:20px;padding:3px 12px;font-size:11.5px;}
#hand-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0 6px;}
#hand{display:flex;gap:6px;padding:6px 14px;min-height:calc(var(--card-h) + 6px);align-items:center;min-width:min-content;}
#hand .card{transform:none;border:2px solid var(--gold-dim);}
#hand .card.sel{transform:translateY(-8px);box-shadow:0 0 0 3px var(--gold),0 0 16px var(--gold);}
#hand .card.targetable{}
#hand-empty{color:var(--muted);font-style:italic;font-size:13px;padding:0 14px;}

/* ============ CONTROLS ============ */
#controls{display:flex;gap:8px;padding:8px 12px calc(10px + var(--safe-b));background:rgba(8,10,20,.9);}
.action-btn{
  flex:1;padding:13px 6px;border-radius:12px;border:1px solid #3a456e;
  background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--ink);
  font-size:13.5px;font-weight:600;cursor:pointer;transition:transform .08s,opacity .15s;
}
.action-btn:active{transform:scale(.97);}
.action-btn.end{background:linear-gradient(180deg,#3a2f14,#2a220f);border-color:var(--gold-dim);color:var(--gold);flex:.7;}
.action-btn.armed{border-color:var(--gold);box-shadow:0 0 0 2px rgba(233,194,104,.4);}
.action-btn:disabled{opacity:.38;cursor:default;}

/* ============ LOG ============ */
#log-toggle{
  position:fixed;right:12px;bottom:calc(78px + var(--safe-b));z-index:6;
  background:rgba(0,0,0,.55);border:1px solid #333c60;border-radius:20px;
  padding:5px 14px;font-size:12px;color:var(--muted);cursor:pointer;
}
#log{
  position:fixed;left:0;right:0;bottom:0;top:35%;z-index:20;
  background:rgba(8,10,20,.97);border-top:1px solid var(--gold-dim);
  border-radius:16px 16px 0 0;display:flex;flex-direction:column;
}
#log:not(.hidden){animation:log-in .3s cubic-bezier(.2,.75,.3,1.05);}
#log-head{
  display:flex;align-items:center;justify-content:space-between;flex:none;
  padding:12px 14px 10px 20px;border-bottom:1px solid #232a44;
  font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--gold);font-weight:700;
}
#log-head::before{
  content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;border-radius:3px;
  background:#3a456e;transform:translateX(-50%);
}
#log-head{position:relative;}
#log-close{
  width:32px;height:32px;flex:none;margin:0;padding:0;border-radius:9px;
  background:rgba(255,255,255,.06);border:1px solid #333c60;color:var(--muted);
  font-size:13px;font-weight:700;line-height:1;cursor:pointer;
}
#log-close:active{transform:scale(.92);}
#log-inner{overflow-y:auto;flex:1;padding:14px 18px calc(20px + var(--safe-b));font-size:13.5px;line-height:1.6;}
.log-line{padding:4px 0;border-bottom:1px solid #1c2238;color:#cfd6ee;}
.log-line .tag{color:var(--gold);font-weight:700;}
.log-line.bad .tag{color:var(--danger);}
.log-line.good .tag{color:var(--good);}
/* each round begins a fresh block — divider + breathing room */
.log-line.round-head{
  margin-top:18px;padding-top:14px;border-top:2px solid #3a456e;
}
.log-line.round-head:first-child{margin-top:4px;}
.log-line.round-head .tag{
  display:block;margin-bottom:3px;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold);
}

/* ============ MODALS ============ */
#modal-overlay{position:fixed;inset:0;background:rgba(4,6,14,.8);backdrop-filter:blur(3px);z-index:40;display:flex;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px;}
.modal{background:linear-gradient(180deg,#1c2340,#141829);border:1px solid #37426e;border-radius:18px;padding:20px;max-width:440px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 20px 60px #000a;margin:auto;}
.modal h2{margin:0 0 12px;font-family:Georgia,serif;color:var(--gold);font-size:24px;}
#modal-card{max-width:400px;text-align:center;}
#peek-imgwrap{perspective:1200px;display:flex;justify-content:center;margin-bottom:4px;padding-top:4px;}
#modal-img{width:auto;max-width:min(78vw,300px);max-height:44vh;border-radius:12px;box-shadow:0 8px 26px #000b;transition:transform .45s cubic-bezier(.4,.1,.2,1);}
.flip-btn{
  margin:12px auto 4px;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:linear-gradient(180deg,#2a3355,#1c2340);border:1px solid var(--gold-dim);color:var(--gold);
  padding:10px 18px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;
}
.flip-btn:active{transform:scale(.96);}
#modal-faces{text-align:left;margin:12px 0;display:flex;flex-direction:column;gap:12px;}
.peek-otherhint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:2px;}
.face-block{background:rgba(255,255,255,.04);border-radius:10px;padding:11px 13px;border-left:3px solid;}
.face-block.nm{border-color:var(--nm);}
.face-block.tr{border-color:var(--gold);}
.face-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:5px;}
.face-head .stat{font-size:11px;color:var(--muted);font-weight:500;margin-left:auto;}
.face-text{font-size:13px;color:#cfd6ee;line-height:1.5;}
.face-trigger{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--gold-dim);}
.modal-close,.msg-btn{margin-top:8px;width:100%;padding:13px;border-radius:12px;border:1px solid #3a456e;background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;}
#msg-body{font-size:15px;line-height:1.6;color:#d3daf0;margin-bottom:16px;}
#msg-buttons{display:flex;flex-direction:column;gap:8px;}
.msg-btn.primary{background:linear-gradient(180deg,#3a2f14,#2a220f);border-color:var(--gold-dim);color:var(--gold);}
/* ---- help carousel ---- */
#modal-help{max-width:460px;padding:16px 16px 18px;}
#help-carousel{overflow:hidden;border-radius:12px;}
#help-track{display:flex;transition:transform .32s ease;}
.help-slide{flex:0 0 100%;min-width:100%;padding:4px 4px 2px;box-sizing:border-box;}
.help-slide .h-emoji{font-size:40px;text-align:center;display:block;margin:6px 0 2px;filter:drop-shadow(0 0 10px rgba(233,194,104,.5));}
.help-slide h3{color:var(--gold);font-size:19px;margin:8px 0 10px;text-align:center;font-family:Georgia,serif;}
.help-slide p{font-size:14px;line-height:1.62;color:#cfd6ee;margin:9px 2px;}
.help-slide p b{color:#fff;}
.help-slide .tag-nm{color:#f0a8c0;font-weight:700;}
.help-slide .tag-tr{color:var(--gold);font-weight:700;}
.help-slide ul{margin:8px 0;padding-left:4px;list-style:none;}
.help-slide li{font-size:13.5px;line-height:1.55;color:#cfd6ee;margin:8px 0;padding-left:22px;position:relative;}
.help-slide li::before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--gold-dim);}
.help-slide .note{background:rgba(233,194,104,.1);border-left:3px solid var(--gold-dim);border-radius:8px;padding:9px 12px;font-size:13px;color:#e9d9b3;margin-top:10px;}
#help-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0 6px;}
.nav-arrow{width:42px;height:42px;border-radius:50%;border:1px solid #3a456e;background:linear-gradient(180deg,var(--panel2),var(--panel));color:var(--gold);font-size:24px;line-height:1;cursor:pointer;flex:none;}
.nav-arrow:disabled{opacity:.3;}
#help-dots{display:flex;gap:7px;}
.help-dot{width:8px;height:8px;border-radius:50%;background:#39426a;transition:all .2s;cursor:pointer;}
.help-dot.on{background:var(--gold);width:20px;border-radius:4px;}

.big-result{text-align:center;}
.big-result .r-emoji{font-size:54px;display:inline-block;animation:result-pop .6s cubic-bezier(.2,.7,.3,1.4);}
@keyframes result-pop{0%{transform:scale(0) rotate(-25deg);opacity:0}70%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1);opacity:1}}

/* ============ JUICE ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
}

/* screen shake on damage */
@keyframes shake{
  10%,90%{transform:translate3d(-1px,0,0)}
  20%,80%{transform:translate3d(3px,0,0)}
  30%,50%,70%{transform:translate3d(-6px,0,0)}
  40%,60%{transform:translate3d(6px,0,0)}
}
#board.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97);}

/* lighthouse beam breathes */
@keyframes lh-beam{
  0%,100%{box-shadow:0 0 20px rgba(233,194,104,.22),0 4px 12px #0008;}
  50%{box-shadow:0 0 36px rgba(233,194,104,.45),0 4px 12px #0008;}
}
#lighthouse-img{animation:lh-beam 4.5s ease-in-out infinite;}

/* health pips react */
@keyframes pip-lose{0%{transform:scale(1)}35%{transform:scale(1.7);filter:brightness(1.8)}100%{transform:scale(1)}}
@keyframes pip-gain{0%{transform:scale(.2);opacity:.2}55%{transform:scale(1.45)}100%{transform:scale(1);opacity:1}}
.pip.pop-lose{animation:pip-lose .5s ease;}
.pip.pop-gain{animation:pip-gain .55s cubic-bezier(.2,.7,.3,1.3);}

/* phase banner slides in on change */
@keyframes phase-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
#phase-text{display:inline-block;}
#phase-banner.change #phase-text{animation:phase-in .38s ease;}

/* floating damage / heal numbers */
@keyframes float-num{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  18%{opacity:1;transform:translate(-50%,-12px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-58px) scale(1)}
}
.float-num{
  position:fixed;z-index:50;font-weight:800;font-size:23px;font-family:Georgia,serif;
  pointer-events:none;animation:float-num 1.05s ease-out forwards;text-shadow:0 2px 7px #000c;
}
.float-num.dmg{color:var(--danger);}
.float-num.heal{color:var(--good);}

/* card poof when a card leaves the sea */
@keyframes card-poof{
  0%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}
  100%{transform:scale(.28) rotate(22deg) translateY(-26px);opacity:0;filter:brightness(2.2)}
}
.poof-clone{
  position:fixed;z-index:45;pointer-events:none;border-radius:8px;
  background-size:cover;background-position:center;
  animation:card-poof .5s ease-in forwards;box-shadow:0 0 24px var(--good);
}
.poof-clone.bad{box-shadow:0 0 24px var(--danger);}

/* modal / overlay entrances */
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
#modal-overlay:not(.hidden){animation:overlay-in .2s ease;}
#modal-overlay:not(.hidden) .modal:not(.hidden){animation:modal-pop .3s cubic-bezier(.2,.7,.3,1.25);}

/* log sheet slide-up */
@keyframes log-in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.log-line{animation:logline-in .3s ease;}
@keyframes logline-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* buttons get a livelier press */
.action-btn{will-change:transform;}
.action-btn:not(:disabled):active{transform:scale(.95);}
.action-btn.armed{animation:armed-glow 1.6s ease-in-out infinite;}
@keyframes armed-glow{0%,100%{box-shadow:0 0 0 2px rgba(233,194,104,.35)}50%{box-shadow:0 0 0 2px rgba(233,194,104,.7),0 0 14px rgba(233,194,104,.5)}}
.icon-btn:active{transform:scale(.9);}

/* new sea card drops in */
.card.entering{animation:card-drop .45s cubic-bezier(.2,.7,.3,1.2);}
@keyframes card-drop{from{transform:translateY(-46px) scale(.6);opacity:0;}}
.card.trap.entering{animation:card-drop-trap .45s cubic-bezier(.2,.7,.3,1.2);}
@keyframes card-drop-trap{from{transform:rotate(180deg) translateY(46px) scale(.6);opacity:0;}to{transform:rotate(180deg);}}

/* sea card tap feedback (nightmares only — traps carry a rotate transform) */
.card.nightmare:active{transform:scale(.95);}