@font-face{font-family:Jua;src:url('./assets/fonts/Jua-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Gowun Dodum';src:url('./assets/fonts/GowunDodum-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

  * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #10141f; }
  body { font-family: 'Jua', 'Gowun Dodum', system-ui, sans-serif; color: #eef4fa; }
  #app { position: fixed; inset: 0; }
  #app canvas { display: block; }

  /* 입질 접근 비네트 (요구사항 2) */
  #vignette {
    position: fixed; inset: 0; pointer-events: none; z-index: 9;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 80, 80, 0.22) 100%);
    opacity: 0; transition: opacity .5s ease;
  }
  body.vignette-on #vignette { opacity: 1; animation: vigPulse 1s infinite alternate; }
  @keyframes vigPulse { from { opacity: .55; } to { opacity: 1; } }

  #ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
  #ui button, #ui .card { pointer-events: auto; }
  #hud .panel.clickable { pointer-events: auto; cursor: pointer; }
  #hud .panel.clickable:hover { border-color: rgba(255, 215, 94, 0.5); }

  /* ---------- HUD ---------- */
  #hud { position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
  .panel {
    background: rgba(13, 20, 34, 0.72); border: 1px solid rgba(140, 190, 255, 0.22);
    border-radius: 14px; padding: 10px 14px; backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
  #locName { font-size: 19px; letter-spacing: 0.5px; }
  #locMood { display: block; font-size: 12px; opacity: 0.65; margin-top: 2px; font-family: 'Gowun Dodum', sans-serif; }
  #xpBar { height: 10px; background: rgba(255,255,255,0.12); border-radius: 6px; overflow: hidden; margin-top: 7px; }
  #xpFill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg,#43d6a0,#5eb1ff); transition: width .5s ease; }
  #xpText { font-size: 11px; opacity: 0.75; display: block; margin-top: 4px; }
  #rodPanel { font-size: 15px; display: flex; align-items: center; gap: 4px; }
  #badgeBox { font-size: 16px; display: flex; align-items: center; gap: 6px; }
  #badgeBox b { color: #ffd75e; font-size: 20px; }

  #baitPanel { font-size: 15px; display: flex; align-items: center; gap: 8px; transition: all .15s ease; }
  #baitPanel.noBait { border-color: rgba(255, 110, 110, 0.55); animation: noBaitPulse 1.4s infinite alternate; }
  @keyframes noBaitPulse { from { box-shadow: 0 0 0 rgba(255,90,90,0); } to { box-shadow: 0 0 14px rgba(255,90,90,.35); } }
  #baitCount { color: #ffd75e; font-size: 16px; }

  #fishStrip { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 8px 12px; max-width: 400px; }
  .stripLabel { font-size: 11px; opacity: .6; margin-right: 3px; font-family: 'Gowun Dodum', sans-serif; }
  .fishChip {
    --rc: #8ab4d8;
    font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
    border: 1px solid var(--rc); color: var(--rc);
    background: rgba(10, 16, 28, 0.55); white-space: nowrap;
  }
  .fishChip i { font-style: normal; opacity: .7; margin-right: 2px; }
  .fishChip.big { font-size: 12.5px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px; }
  .fishChip.big i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .fishChip.big em { font-style: normal; font-size: 10px; opacity: .65; }
  .fishChips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

  /* ---------- Menu ---------- */
  #menu { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 8px; }
  #menu button {
    font-family: inherit; font-size: 15px; color: #eef4fa; cursor: pointer;
    background: rgba(13, 20, 34, 0.75); border: 1px solid rgba(140, 190, 255, 0.25);
    border-radius: 12px; padding: 10px 16px; transition: all .15s ease;
  }
  #menu button:hover { background: rgba(64, 110, 170, 0.85); transform: translateX(-3px); }

  /* ---------- Hint / Toast ---------- */
  #hint {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    font-size: 16px; text-shadow: 0 2px 6px rgba(0,0,0,.8); opacity: 0; transition: opacity .3s;
    white-space: nowrap;
  }
  #hint.visible { opacity: 0.95; }
  #toast {
    position: absolute; top: 84px; left: 50%; transform: translateX(-50%) translateY(-8px);
    background: rgba(13, 20, 34, 0.88); border: 1px solid rgba(255, 215, 94, 0.35);
    padding: 10px 22px; border-radius: 999px; font-size: 15px; opacity: 0; transition: all .35s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: nowrap; max-width: 92vw;
  }
  #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ---------- Approach tip (요구사항 2) ---------- */
  #approachTip {
    position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%) scale(.85);
    background: rgba(60, 14, 20, 0.82); border: 1px solid rgba(255, 120, 120, .5);
    padding: 8px 22px; border-radius: 999px; font-size: 17px; color: #ffd2c8;
    text-shadow: 0 0 12px rgba(255, 90, 70, .6);
    opacity: 0; transition: all .3s cubic-bezier(.34,1.56,.64,1);
  }
  #approachTip.visible { opacity: 1; transform: translateX(-50%) scale(1); animation: tipThrob .8s infinite alternate; }
  @keyframes tipThrob { from { filter: brightness(.92); } to { filter: brightness(1.22); } }

  .hidden { display: none !important; }

  /* ---------- Power Gauge ---------- */
  #powerWrap { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: min(420px, 86vw); }
  .gaugeTitle { text-align: center; font-size: 14px; margin-bottom: 6px; text-shadow: 0 2px 4px rgba(0,0,0,.7); }
  #powerGauge {
    height: 26px; border-radius: 10px; position: relative; overflow: hidden;
    background: rgba(10, 14, 24, 0.85); border: 2px solid rgba(160, 200, 255, 0.4);
  }
  #powerGauge .sweetZone { position: absolute; right: 0; top: 0; bottom: 0; width: 18%; background: repeating-linear-gradient(45deg, rgba(255,215,94,.25), rgba(255,215,94,.25) 6px, transparent 6px, transparent 12px); border-left: 2px dashed rgba(255,215,94,.7); }
  #powerFill { height: 100%; width: 0%; background: linear-gradient(90deg,#5eb1ff,#3f8ee8); border-radius: 8px 0 0 8px; }

  /* ---------- Reel Mini-game : 반원형 휠 게이지 (요구사항 3, 4) — 컴팩트 사이즈 ---------- */
  #reelWrap {
    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
    width: min(400px, 86vw); background: rgba(13, 20, 34, 0.88);
    border: 1px solid rgba(140, 190, 255, 0.3); border-radius: 14px; padding: 9px 14px 7px;
    backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(0,0,0,.5);
  }
  .reelTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
  #reelFishName { font-size: 15px; text-shadow: 0 0 12px currentColor; }
  #variantChip {
    --vc: #ffd75e;
    display: inline-block; margin-left: 6px; vertical-align: middle;
    font-size: 10px; color: var(--vc); border: 1px solid var(--vc);
    border-radius: 999px; padding: 1px 7px;
    animation: chipGlow 1s infinite alternate;
  }
  @keyframes chipGlow { from { filter: brightness(.85); } to { filter: brightness(1.25); } }
  .statBars { flex: 1; max-width: 200px; display: flex; flex-direction: column; gap: 3px; }
  .statRow { display: flex; align-items: center; gap: 5px; font-size: 9.5px; opacity: .95; }
  .statRow label { width: 32px; text-align: right; }
  .bar { flex: 1; height: 6px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
  .bar > div { height: 100%; border-radius: 5px; transition: width .12s linear; }
  #hpFill { background: linear-gradient(90deg,#ff8a5c,#ff5c74); width: 100%; }
  #tensionFill { background: linear-gradient(90deg,#ffe27a,#ff5c3c); width: 0%; }
  #timerFill { background: linear-gradient(90deg,#7ae2ff,#5eb1ff); width: 100%; }

  #gaugeBox { position: relative; transition: filter .15s; }
  #gaugeBox.warn #reelSvg { filter: drop-shadow(0 0 14px rgba(255, 90, 90, .8)); }
  #gaugeBox.dash #reelSvg { filter: drop-shadow(0 0 18px rgba(255, 170, 60, .9)); }
  #reelSvg { display: block; width: 100%; height: auto; overflow: visible; }
  #reelSvg path { stroke-width: 20; stroke-linecap: butt; }
  #zTrack { stroke: rgba(255,255,255,0.07); }
  .zSafe { stroke: rgba(94, 177, 255, 0.55); }
  .zGood { stroke: rgba(67, 214, 160, 0.65); }
  .zDanger { stroke: rgba(255, 92, 116, 0.75); }
  .zPerfect {
    stroke: url(#goldGrad); stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(255, 200, 80, .8));
    animation: optPulse 1s infinite alternate;
  }
  @keyframes optPulse { from { filter: brightness(.9); } to { filter: brightness(1.3); } }
  #needleG polygon { fill: #eef4fa; transition: fill .1s; }
  #needleG circle { fill: #cfe0f8; }
  #needleG.hot polygon { fill: #ffd75e; filter: drop-shadow(0 0 10px #ffd75e); }
  #judgeLabel { text-align: center; height: 18px; font-size: 13px; margin-top: 1px; opacity: 0; }
  #judgeLabel.pop { animation: judgePop .8s ease forwards; }
  #judgeLabel.perfect { color: #ffd75e; text-shadow: 0 0 14px rgba(255,215,94,.9); }
  #judgeLabel.good { color: #43d6a0; }
  #judgeLabel.safe { color: #7ae2ff; }
  #judgeLabel.danger { color: #ff5c74; }
  @keyframes judgePop { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(1.25); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
  .gaugeTip { text-align: center; font-size: 10px; opacity: 0.65; margin-top: 1px; font-family: 'Gowun Dodum', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---------- Bite Alert ---------- */
  #biteAlert {
    position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
    font-size: 120px; color: #ff5c5c; text-shadow: 0 0 40px rgba(255, 60, 60, .8), 0 4px 0 #7a1414;
    animation: none;
  }
  #biteAlert.shakeIt { animation: shakeBig .18s infinite; }
  @keyframes shakeBig { 0%,100% { transform: translate(-52%,-50%) rotate(-8deg) scale(1.06);} 50% { transform: translate(-48%,-50%) rotate(8deg) scale(1.12);} }

  /* ---------- Modal ---------- */
  .overlay {
    position: fixed; inset: 0; background: rgba(5, 8, 16, 0.66); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 50; pointer-events: auto;
  }
  .overlay .card { pointer-events: auto; }
  .card {
    position: relative; background: linear-gradient(160deg, #17202f, #101723);
    border: 1px solid rgba(140, 190, 255, 0.28); border-radius: 20px; padding: 22px 26px;
    max-width: min(720px, 94vw); max-height: 86vh; overflow-y: auto; width: 480px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: cardIn .25s ease;
  }
  @keyframes cardIn { from { opacity: 0; transform: scale(.92) translateY(14px); } to { opacity: 1; transform: none; } }
  .card.wide { width: min(760px, 95vw); }
  .card h2 { font-size: 24px; margin-bottom: 4px; }
  .card .sub { font-size: 13px; opacity: 0.7; margin-bottom: 14px; font-family: 'Gowun Dodum', sans-serif; }
  .closeBtn {
    position: sticky; top: 0; float: right; width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255,255,255,.08); border: none; color: #fff; font-size: 15px; cursor: pointer;
  }
  .closeBtn:hover { background: rgba(255, 90, 90, .5); }

  .rowCard {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
    border: 1px solid rgba(140, 190, 255, 0.16); background: rgba(255,255,255,.03); margin-bottom: 8px;
  }
  .rowCard.equipped { border-color: rgba(67, 214, 160, 0.55); background: rgba(67, 214, 160, 0.07); }
  .rowCard.locked { opacity: 0.5; }
  .rowMain { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .rowMain b { font-size: 17px; }
  .rowDesc { font-size: 12px; opacity: .7; font-family: 'Gowun Dodum', sans-serif; }
  .rowMeta { font-size: 11px; color: #9fc3ea; }
  .tagEq { color: #43d6a0; font-size: 13px; white-space: nowrap; }
  .tagLock { color: #ff9a76; font-size: 13px; white-space: nowrap; }
  .actBtn {
    font-family: inherit; font-size: 14px; cursor: pointer; color: #101723;
    background: linear-gradient(180deg, #ffd75e, #ffb43c); border: none; border-radius: 10px; padding: 8px 18px;
  }
  .actBtn:hover { filter: brightness(1.1); transform: translateY(-1px); }

  .baitIcon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    border: 1.5px solid rgba(140, 190, 255, .3);
  }
  .wheelRow { cursor: pointer; transition: all .15s ease; }
  .wheelRow:hover { border-color: rgba(255, 215, 94, .6); transform: translateX(3px); background: rgba(255,215,94,.05); }
  .wheelIcon { background: rgba(255, 215, 94, .08); }

  .helpList { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-family: 'Gowun Dodum', sans-serif; font-size: 14px; line-height: 1.5; }

  /* ---------- Result ---------- */
  .card.result { text-align: center; width: 400px; }
  .resultRar { display: inline-block; font-size: 13px; color: var(--rc); border: 1px solid var(--rc); padding: 3px 16px; border-radius: 999px; margin-bottom: 10px; }
  .variantBanner {
    margin: 6px auto 4px; display: inline-block; font-size: 15px; border-radius: 999px; padding: 4px 18px;
  }
  .variantBanner.unique { color: #ffd75e; border: 1.5px solid #ffd75e; animation: uniBlink .5s infinite alternate; box-shadow: 0 0 24px rgba(255, 215, 94, .45); }
  .variantBanner.rare { color: #7affd4; border: 1.5px solid #7affd4; }
  @keyframes uniBlink { from { filter: brightness(.95); transform: scale(1); } to { filter: brightness(1.2); transform: scale(1.04); } }
  .resultName { font-size: 30px; }
  .newTag { display: inline-block; background: #ff5c74; color: #fff; font-size: 13px; border-radius: 8px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; animation: newBlink .8s infinite alternate; }
  @keyframes newBlink { from { transform: scale(1); } to { transform: scale(1.12); } }
  .recordTag { display: inline-block; background: rgba(255,215,94,.15); color: #ffd75e; border: 1px solid rgba(255,215,94,.5); font-size: 12px; border-radius: 8px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; }
  .resultSize { font-size: 20px; opacity: .85; margin-top: 6px; }
  .bonusLine { color: #ffd75e; font-size: 14px; margin-top: 8px; }
  .multLine { font-size: 12px; color: #9fc3ea; margin-top: 8px; font-family: 'Gowun Dodum', sans-serif; }
  .xpLine { font-size: 18px; margin: 12px 0 4px; color: #7ae2ff; }
  .perfectRate { font-size: 12px; opacity: .6; }
  .newBadge { margin: 8px 0 0; font-size: 14px; color: #ffd75e; }
  .bigBtn {
    margin-top: 18px; font-family: inherit; font-size: 17px; cursor: pointer; color: #101723;
    background: linear-gradient(180deg, #7ae2ff, #43a8e8); border: none; border-radius: 12px; padding: 12px 42px;
  }
  .bigBtn:hover { filter: brightness(1.1); transform: translateY(-1px); }

  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-thumb { background: rgba(140,190,255,.25); border-radius: 4px; }

/* Compatibility with the current game engine; original HUD presentation above. */
button{font:inherit;color:inherit;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,canvas:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd75e;outline-offset:3px}#app canvas{touch-action:none}#hud{width:360px}#locName{font-weight:400;line-height:1.2}#wheelPanel{display:flex;gap:6px;align-items:center;font-size:15px;text-align:left}#baitPanel{text-align:left}#badgeBox b{font-weight:400}#menu button{min-height:41px}#menu #catchCount{color:#ffd75e;font-size:12px}#ui .panel{pointer-events:auto}.srOnly{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#actionButton{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);padding:6px 12px;border:0;background:transparent;color:#eef4fa;font-size:16px;text-shadow:0 2px 6px #000;white-space:nowrap;touch-action:none}body:not([data-state=idle]):not([data-state=charging]) #actionButton{display:none}body:is([data-state=idle],[data-state=charging]) #hint{display:none}#powerText{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#fff5c6;text-shadow:0 2px 3px #122749}#reelWrap{left:20px;bottom:24px;transform:none;width:310px;padding:11px 15px}.statBars{max-width:none;gap:4px;margin:7px 0}.statRow b{min-width:32px;text-align:right;font-size:10px;font-weight:400}#timerText{font-size:13px;color:#7ae2ff}#reelSvg{max-height:145px}#reelSvg path{fill:none}.zTrack{stroke:#ffffff12}#gaugeCaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:11px;color:#b4cee8}#judgeLabel{opacity:1;height:auto;min-height:19px;color:#ffd75e}#reelWrap .gaugeTip{white-space:normal;font-size:10px;line-height:1.5}body[data-state=reeling] #hint{bottom:27px;max-width:calc(100vw - 390px);left:calc(50% + 130px);white-space:normal;text-align:center}.dmgPop{position:absolute;left:50%;top:10%;font-size:24px;color:#ffd75e;text-shadow:0 2px #102130;pointer-events:none;animation:damageRise .9s forwards}@keyframes damageRise{to{opacity:0;transform:translateY(-40px)}}
#floatLabel{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:13px;color:#fff3c2;pointer-events:none;text-shadow:0 2px 4px #000}#floatLabel span{display:block;padding:5px 9px;background:#0d142299;border:1px solid #8cbcff45;border-radius:8px;white-space:nowrap}#floatLabel i{display:block;width:1px;height:18px;margin:auto;background:#e6d8a8}#hint{white-space:normal;max-width:85vw;text-align:center;line-height:1.5}#toast{white-space:normal;width:max-content;text-align:center;line-height:1.5}
/* Current dialogs adapt to the original dark game menu. The collection is isolated in dex.css. */
#gameDialog{padding:0;border:0;background:transparent;color:#eef4fa;width:auto;max-width:95vw;max-height:90dvh;overflow:visible}#gameDialog::backdrop{background:#050810aa;backdrop-filter:blur(4px)}#gameDialog .card{margin:0}#gameDialog .card #modalTitle{font-size:25px;font-weight:400;line-height:1.4;padding-right:28px;margin-bottom:7px}#gameDialog .card .modalEyebrow{display:none}#gameDialog .card .sub{line-height:1.65}#gameDialog .card .closeBtn{float:none;position:absolute;right:15px;top:15px;z-index:2}#gameDialog .card .rowCard{margin-top:10px}#gameDialog .card .rowMain b{font-weight:400}#gameDialog .card .rowDesc{line-height:1.5}#gameDialog .card .rowMeta{display:block;margin-top:4px}#gameDialog .card .resultFish{width:100%;height:190px;object-fit:contain}#gameDialog .card.result #modalTitle{font-size:30px;padding-right:0}#gameDialog .card.result .resultSize{font-family:Jua,sans-serif;font-size:32px;opacity:1;color:#fff0bc}#gameDialog .card.result .resultSize small{font-size:19px;margin-left:4px}#gameDialog .card.result .resultTags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0}#gameDialog .card.result .resultTags span{font-size:12px;padding:3px 9px;border:1px solid #ffd75e77;border-radius:9px;color:#ffd75e}#gameDialog .card .rewardLine{font-size:14px;color:#b8dced;line-height:1.8;margin:12px 0}#gameDialog .card .rewardLine strong{font-size:24px;color:#7ae2ff;font-weight:400}#gameDialog .card .resultNote{font-family:'Gowun Dodum',sans-serif;font-size:12px;color:#bbcee1;line-height:1.7;margin:12px 0}
#gameDialog .card .dexStats{display:flex;justify-content:space-around;gap:16px;background:#09132170;border-radius:12px;padding:14px;margin:18px 0}#gameDialog .card .dexStats b{font-size:25px;font-weight:400;color:#ffd75e}#gameDialog .card .dexStats small{display:block;font-size:12px;opacity:.65;margin-top:4px}.card .buttonRow{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 6px}.card .buttonRow .bigBtn{margin-top:0}.card .secondaryBtn{background:#253e55;border:1px solid #8cbcff45;border-radius:10px;padding:10px 16px;font-size:14px;color:#e2effb;min-height:42px}.card .sectionHeading{font-size:17px;font-weight:400;margin:20px 0 11px}.card .wheelChoices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.card .wheelChoice{background:#ffffff06;border:1px solid #8cbcff44;border-radius:13px;padding:14px 12px;text-align:left;min-height:100px}.card .wheelChoice[aria-pressed=true]{border-color:#ffd75e;background:#ffd75e12}.card .wheelChoice strong{display:block;font-size:18px;font-weight:400;color:#ffe299}.card .wheelChoice span{display:block;font-family:'Gowun Dodum',sans-serif;font-size:12px;line-height:1.6;color:#afc5db;margin-top:7px}.card .settingsRow{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:1px solid #8cbcff30;padding:15px 0;font-size:15px}.card .settingsRow small{display:block;font-family:'Gowun Dodum',sans-serif;font-size:11px;color:#a9c4dd;margin-top:5px;line-height:1.6}.card .settingsRow input[type=checkbox]{width:21px;height:21px;accent-color:#43d6a0}.card .settingsRow input[type=range]{width:140px;accent-color:#ffd75e}.card select{font:13px 'Gowun Dodum',sans-serif;padding:8px;border:1px solid #8cbcff55;border-radius:6px;background:#112536;color:#e4eef8;max-width:170px}.card .welcomeArt{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:18px}.card .stepGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.card .stepGrid span{color:#ffd75e;font-size:23px}.card .stepGrid b{display:block;font-weight:400;font-size:17px;margin:8px 0}.card .stepGrid p{font:12px/1.7 'Gowun Dodum',sans-serif;color:#a9c5da}.card .welcomeFoot{display:flex;align-items:center;gap:17px;justify-content:space-between}.card .welcomeFoot small{font:11px/1.7 'Gowun Dodum',sans-serif;color:#abc9dc}.card .welcomeFoot .bigBtn{padding:12px 20px;margin:0}.card .logRow{display:flex;align-items:center;gap:13px;border-top:1px solid #8cbcff30;padding:12px 0}.card .logRow img{width:80px;height:50px;object-fit:contain}.card .logRow div{flex:1}.card .logRow b{font-weight:400;font-size:16px}.card .logRow small{display:block;color:#adc4dc;font-size:11px;margin-top:5px}.card .logRow>span{font-size:23px;color:#ffdf91}.card .emptyState{padding:25px;text-align:center;font-size:16px;line-height:1.8;color:#c0d9eb}
#loading{position:fixed;inset:0;z-index:100;background:#101723;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:20px}#loading h1{font-size:32px;font-weight:400;color:#ffd75e}#loading p{font-size:16px}body.reducedMotion *,body.reducedMotion *:before,body.reducedMotion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:760px){#hud{width:calc(100vw - 128px);max-width:300px;gap:6px;left:10px;top:10px}#hud .panel{padding:8px 10px;border-radius:11px}#locName{font-size:18px}#locMood{font-size:11px}#rodPanel,#baitPanel,#wheelPanel{font-size:13px}#baitCount{font-size:13px}#badgeBox{font-size:14px}#badgeBox b{font-size:16px}#fishStrip{gap:4px}.fishChip{font-size:10px;padding:2px 6px}#menu{top:10px;right:10px;gap:6px}#menu button{font-size:13px;padding:9px 11px;min-height:39px}#reelWrap{left:50%;bottom:61px;transform:translateX(-50%);width:min(320px,calc(100vw - 26px))}#reelSvg{max-height:131px}body[data-state=reeling] #hint{left:50%;max-width:calc(100vw - 30px);bottom:12px;font-size:12px}body[data-state=reeling] #fishStrip{display:none}#actionButton{bottom:max(18px,env(safe-area-inset-bottom));width:calc(100% - 20px);font-size:14px;white-space:normal;line-height:1.6}#hint{font-size:14px}#toast{font-size:13px;top:45%;max-width:90vw}#approachTip{bottom:95px;font-size:14px;white-space:nowrap}#biteAlert{font-size:95px;top:48%}#gameDialog .card{padding:20px;max-height:88dvh;width:min(760px,94vw)}#gameDialog .card .wheelChoices{grid-template-columns:1fr}#gameDialog .card .wheelChoice{min-height:0}.card .stepGrid{grid-template-columns:1fr}.card .stepGrid br{display:none}.card .welcomeFoot{flex-direction:column;align-items:stretch}.card .settingsRow{gap:12px;font-size:14px}.card .settingsRow select{max-width:145px}.card .settingsRow input[type=range]{width:120px}.card .resultFish{height:160px!important}.card .resultTags span{font-size:11px!important}.card .welcomeArt{height:160px}.card .rowMain b{font-size:16px}.card .rowDesc{font-size:11px}.card .rowMeta{font-size:10px}.card .actBtn{padding:9px 12px;min-height:40px}.card .tagLock{font-size:11px}}
@media(max-height:670px) and (max-width:760px){body[data-state=reeling] #rodPanel,body[data-state=reeling] #baitPanel,body[data-state=reeling] #badgeBox,body[data-state=reeling] #wheelPanel{display:none}#reelWrap{bottom:50px;padding:9px 14px}#reelSvg{max-height:100px}#reelWrap .statBars{gap:3px}}
#gameDialog{margin:auto}
/* Size simple dialogs to their game card; full-screen destinations keep their own rules. */
#gameDialog:not(.collectionDialog):not(.titleDialog){width:fit-content;min-width:0}