/* How to play, ability tooltips, Skip, and the turn log. */

#howto { position: fixed; inset: 0; z-index: 9; }
#howto[hidden] { display: none; }
#howto .hdim { position: absolute; inset: 0; background: rgba(3,5,9,.62); }
#howto .hspot { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(3,5,9,.62), 0 0 0 2px var(--ally), 0 0 26px rgba(53,224,255,.55); pointer-events: none; transition: all .25s; }
#howto .pk { font-weight: 700; }
#howto .pk-health { color: #5dff9a; } #howto .pk-might { color: #ff6a5a; } #howto .pk-haste { color: #5ac8ff; } #howto .pk-energy { color: #ffd84a; }
#howto .hcard { position: absolute; width: min(330px, calc(100vw - 24px)); background: var(--panel-2); border: 1px solid rgba(53,224,255,.45); border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
#howto .hstep { font: 700 10px var(--ui); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
#howto h3 { margin: 4px 0 6px; font: 800 17px var(--title); letter-spacing: .04em; color: #fff; }
#howto p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--fg); }
#howto .hno { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
#howto .hbtns { display: flex; gap: 6px; justify-content: flex-end; }
#howto button { font: 700 12px var(--ui); padding: 8px 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
#howto button.primary { background: linear-gradient(180deg, #7eeeff, #23b8d8); color: #041018; border: 0; }
#howto button.ghost { color: var(--muted); }
.howlink { display: block; margin: 10px auto 0; background: none; border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font: 600 13px var(--ui); color: var(--fg); cursor: pointer; }

#tip { position: fixed; z-index: 7; max-width: 260px; background: rgba(8,11,17,.96); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; font-size: 12px; color: var(--muted); pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#tip[hidden] { display: none; }
#tip b { color: #fff; font-size: 13px; }
#tip .tph { font: 800 9.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ph); margin-left: 4px; }
#tip .tfx { color: var(--fg); margin: 2px 0; }
#tip .tcd { font-size: 11px; }

#skip { position: fixed; right: 16px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 4; font: 800 13px var(--title); letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); background: rgba(13,17,26,.9); color: #fff; cursor: pointer; }
#skip[hidden] { display: none; }

#turnlog { position: fixed; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 270px; z-index: 3; }
#logBtn { font: 700 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 8px 8px 0 0; border: 1px solid var(--line); border-bottom: 0; background: var(--panel); color: var(--muted); cursor: pointer; }
#logBtn span { display: inline-block; transition: transform .2s; }
#turnlog:not(.open) #logBtn { border-radius: 8px; border-bottom: 1px solid var(--line); }
#turnlog:not(.open) #logBtn span { transform: rotate(-90deg); }
#turnlog ol { list-style: none; margin: 0; padding: 6px 0; max-height: 210px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 0 10px 10px 10px; font-size: 12px; }
#turnlog:not(.open) ol, #turnlog ol:empty { display: none; }
#turnlog li { padding: 2px 10px 2px 12px; border-left: 2px solid var(--ph); margin-left: 6px; color: var(--fg); }
#turnlog li.lt { border: 0; margin: 4px 0 2px; color: var(--muted); font: 700 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
#turnlog li.dmg { color: #ffb4a8; } #turnlog li.heal { color: #a8ffc6; } #turnlog li.death { color: #fff; font-weight: 700; } #turnlog li.round { color: var(--dash); font-weight: 700; }

@media (max-width: 1100px) { #turnlog { bottom: auto; top: 220px; width: 230px; } }
#sndpop { position: fixed; top: 58px; right: 12px; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.5); font-size: 13px; }
#sndpop[hidden] { display: none; }
#sndpop label { display: flex; align-items: center; gap: 10px; color: var(--fg); }
#sndpop input[type=range] { width: 150px; accent-color: var(--ally); }
#sndpop .mute { color: var(--muted); }

@media (max-width: 640px) {
  #rotL, #rotR { display: none; }
  #turnlog { top: auto; bottom: calc(180px + env(safe-area-inset-bottom)); left: 8px; width: min(260px, calc(100vw - 16px)); }
  #turnlog ol { max-height: 150px; }
  #skip { bottom: calc(190px + env(safe-area-inset-bottom)); right: 8px; }
}

/* An invalid aim says why, in the hint. */
#hint .bad { color: #ff8a9a; }

/* Brush stealth badges */
.ulabel.hid .pip::after { content: "◌ hidden"; color: #9fffc0; font-size: 10.5px; }
.ulabel.spotted .pip::after { content: "👁 spotted"; font: 700 10.5px var(--ui); color: #ff7a8a; margin-left: 3px; text-shadow: 0 1px 2px #000; }
.ulabel.revealed .pip::after { content: "👁 revealed → T" attr(data-until); font: 700 10.5px var(--ui); color: #ffd36a; margin-left: 3px; text-shadow: 0 1px 2px #000; }
.frame .stl { font-style: normal; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 99px; margin-left: 4px; }
.frame .stl.hidden { color: #9fffc0; background: rgba(60,180,100,.18); }
.frame .stl.spotted { color: #ff8a9a; background: rgba(255,61,90,.18); }
.frame .stl.revealed { color: #ffd36a; background: rgba(255,200,60,.16); }
#hint .warn { color: #ffd36a; }
.ghostlbl { font-style: italic; }
.ulabel.sudden .pip::after { content: "👁 revealed (sudden death)"; font: 700 10.5px var(--ui); color: #ff9a5a; margin-left: 3px; text-shadow: 0 1px 2px #000; }
.frame .stl.sudden { color: #ffb08a; background: rgba(255,90,40,.18); }