/* Word Guardians v1.9.6 — compact mobile flow + guardian drag/drop */
.dock .card{position:relative;touch-action:none;-webkit-user-select:none;user-select:none}
.dock .card.wgDragSource{outline:2px solid #ffe18a;box-shadow:0 0 0 2px #ffe18a2b,0 0 18px #55d5c855!important}
.cell.wgDropReady{outline:2px solid #62e9df!important;outline-offset:-2px;background:#62e9df18!important}
.cell.wgDropHot{outline:3px solid #ffe18a!important;background:#ffe18a24!important;box-shadow:inset 0 0 18px #55d5c83d,0 0 12px #ffe18a55!important}
.wgGuardianDragGhost{position:fixed;z-index:9999;width:62px;height:62px;display:grid;place-items:center;pointer-events:none;transform:translate(-50%,-50%) scale(1.06);border:1px solid #efc766bb;border-radius:18px;background:radial-gradient(circle at 40% 28%,#ffffff26,#06445edc 62%,#031d32ee);box-shadow:0 12px 28px #0009,0 0 18px #55d5c866;will-change:left,top,transform}
.wgGuardianDragGhost img{max-width:54px;max-height:54px;object-fit:contain;filter:drop-shadow(0 6px 7px #001522aa)}
.wgGuardianDragGhost .ico{font-size:34px;line-height:1}
body.wgDraggingGuardian{cursor:grabbing}

@media(max-width:600px){
  .app{padding:max(4px,env(safe-area-inset-top)) 4px calc(6px + env(safe-area-inset-bottom))!important}
  .wrap{max-width:100%!important}
  .question{margin:5px 0!important;padding:9px 9px 8px!important;border-radius:14px!important}
  .question small{font-size:.43rem!important;letter-spacing:.03em!important}
  .question strong{margin-top:2px!important;font-size:clamp(1.16rem,5.8vw,1.42rem)!important;line-height:1.08!important}
  .answers{gap:5px!important;margin-top:8px!important}
  .answer{min-height:49px!important;padding:7px 5px!important;border-radius:11px!important;font-size:.90rem!important;line-height:1.08!important}
  .feedback{min-height:16px!important;margin-top:4px!important;font-size:.58rem!important;line-height:1.2!important}
  .tools{gap:5px!important;margin-top:5px!important}
  .tool{min-height:40px!important;padding:5px 4px!important;border-radius:11px!important;font-size:.56rem!important}

  /* Boss information becomes a compact HUD strip; the actual boss stays large on the lane overlay. */
  .bossStage{min-height:42px!important;max-height:46px!important;margin:4px 0!important;padding:5px 8px!important;border-radius:13px!important;display:grid!important;grid-template-columns:minmax(112px,.85fr) minmax(0,1.15fr)!important;align-items:center!important;gap:4px 8px!important;overflow:hidden!important}
  .bossStage .bossVisual,.bossStage .bossEyebrow,.bossStage .bossLane,.bossStage .bossHpText,.bossStage .bossHint{display:none!important}
  .bossStage .bossName{grid-column:1!important;margin:0!important;font-size:.74rem!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .bossStage .bossHpTrack{grid-column:2!important;margin:0!important;height:10px!important;border-radius:99px!important}

  .boardBox{padding:4px!important;border-radius:15px!important}
  .lane{min-height:66px!important;margin:3px 0!important;gap:2px!important;padding:2px!important;border-radius:11px!important}
  .cell{border-radius:7px!important}
  .guardianWrap .premiumGuardian{width:40px!important;height:40px!important}
  .baseChest{width:44px!important;height:44px!important}

  .energy{margin-top:4px!important;padding:5px 6px!important;border-radius:11px!important;font-size:.54rem!important}
  .track{height:7px!important}
  .dock{gap:4px!important;margin-top:6px!important}
  .card{min-height:72px!important;padding:5px 3px 4px!important;border-radius:12px!important}
  .card .premiumGuardian{width:51px!important;height:51px!important;margin:0 auto 2px!important}
  .card b{font-size:.49rem!important;line-height:1.05!important}
  .card small{font-size:.34rem!important;line-height:1.12!important;margin-top:2px!important}
  .wgGuardianDragGhost{width:56px;height:56px;border-radius:16px}
  .wgGuardianDragGhost img{max-width:48px;max-height:48px}
}

@media(max-width:390px){
  .question{padding:8px!important}
  .question strong{font-size:clamp(1.10rem,5.6vw,1.34rem)!important}
  .answer{min-height:47px!important;font-size:.86rem!important}
  .lane{min-height:63px!important}
  .card{min-height:68px!important;padding:4px 2px!important}
  .card .premiumGuardian{width:47px!important;height:47px!important}
  .card b{font-size:.46rem!important}
  .card small{font-size:.32rem!important}
}