/* Familiar pixel harbor layout and phone controls. */
@font-face{font-family:VT323UI;src:url('./assets/vt323.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;font-family:VT323UI,monospace;color:#294b55}
body,button,span,small,b,strong,p,h1,h2,h3,div,em,li{font-family:VT323UI,monospace!important;font-weight:400}
.game{width:min(100vw,440px);height:100svh;min-height:580px}
.hud{top:20px;left:20px;right:20px;align-items:center;gap:12px}
.brand .eyebrow{display:none}.brand h1{font-size:28px;line-height:1.1;letter-spacing:-.5px;max-width:none;margin:0;color:#315963;text-shadow:1px 1px #fff0c9}
.wallet{padding:0;gap:8px}.currency,.gems{height:44px;min-height:44px;min-width:49px;padding:4px 7px;font-size:18px;gap:5px;border:2px solid #5d8188;box-shadow:0 3px #416871}.currency img{width:16px;height:16px}
.top-tools{top:82px;left:20px;right:20px;gap:10px}.top-tools>button{flex:1;min-width:0;height:44px;min-height:44px;border:2px solid #5d8188;background:#fff0cf;box-shadow:0 3px #416871;justify-content:center;padding:4px;gap:6px;display:flex;align-items:center;font-size:16px}.top-tools img{width:16px;height:16px}.icon-button b{font-size:14px}.icon-button #sound-mark{display:none}.badge{font-size:14px}

.place-sign{top:218px;left:22px;text-shadow:none}.sign-kicker,.sign-sub{display:none}.place-sign h2{font-size:26px;margin:0;line-height:1.2;color:#315963}
.home-panel,.fishing-panel{left:20px;right:20px;bottom:18px}
.floating-note{top:auto;bottom:250px;left:20px;right:20px;transform:none;white-space:normal;min-height:44px;padding:10px 12px;display:flex;align-items:center;gap:12px;background:#305d6b;border:1px solid #98bdb0;border-left:3px solid #e6c47d;box-shadow:none;text-align:left;width:auto}
.floating-note b{font-size:14px;color:#eed292;white-space:nowrap}.floating-note span{font-size:16px;margin:0;line-height:1.3;color:#f3efd6}
.inventory-strip{height:48px;min-height:48px;padding:9px 12px;margin-bottom:14px;background:#e8eed9;color:#345e67;border:2px solid #648c89;box-shadow:0 3px #335f6b;font-size:16px}.inventory-strip b{color:#345e67}.inventory-strip img{width:24px;height:24px}.inventory-strip i{font-size:20px}
.main-actions{gap:10px;grid-template-columns:1fr 1fr 1.22fr}.action-button{min-height:86px;padding:12px 4px;border:2px solid #4e7982;box-shadow:inset 0 -4px #ddcba6,0 3px #335f6b;background:#fff0cf;gap:8px}.action-button img{height:24px;width:32px;margin:0}.action-button span{font-size:18px;line-height:1.2}.action-button small{display:none}.action-button.primary{background:#ecc675;box-shadow:inset 0 -4px #d1a355,0 3px #335f6b}
.bottom-line{margin-top:16px;height:44px}.bottom-line>span{display:none}.bottom-line button{font-size:16px;min-height:44px;display:flex;align-items:center;gap:8px;color:#f5edcc}.bottom-line button span{font-size:16px;color:#cee0d4}
.back-button,.depth-tag{top:210px;min-height:44px;height:44px;border:1px solid #8db3aa;background:#376c78;color:#f5efd5;box-shadow:0 3px #315d69;padding:10px;font-size:16px}.back-button{left:20px}.depth-tag{right:20px;display:flex;align-items:center;gap:5px}
.gear-summary{min-height:44px;margin:0 0 12px;padding:10px 12px;font-size:16px;line-height:1.3;background:#305d6b;border:1px solid #98bdb0;border-left:3px solid #e6c47d}.is-reeling .gear-summary{display:none}
.fishing-status{min-height:44px;margin-bottom:12px;padding:10px 12px;background:#305d6b;border:1px solid #98bdb0;text-shadow:none;font-size:16px;line-height:1.3;color:#fff0cf}.mini-bag{font-size:14px;padding:0;margin-left:10px;white-space:nowrap;color:#c6d9cc}
.fishing-meter{padding:14px 12px;background:#fff0cf;border:2px solid #779a90;margin-bottom:14px;box-shadow:0 3px #335f6b}.meter-title,.pull-caption{font-size:14px;line-height:1.3;color:#345e67}.meter-title{margin-bottom:9px}.meter-track{height:14px;border:1px solid #9bad94;background:#d8debf}.danger-zone{width:32%;background:repeating-linear-gradient(135deg,#d6a193 0 3px,#e6b8a5 3px 6px)}.pull-caption{margin-top:12px}.pull-progress{height:5px;margin-top:7px;background:#c7d5bc}.meter-help{display:none}
.fish-controls{gap:10px}.cast-button{min-height:64px;font-size:24px;border:2px solid #4e7982;background:#ecc675;box-shadow:inset 0 -4px #d1a355,0 3px #335f6b}.cast-button.holding{background:#e6b663}.auto-button{width:64px;min-height:64px;font-size:18px;border:2px solid #85aca3;background:#376c78;box-shadow:0 3px #335f6b}.auto-button small{font-size:14px;margin-top:5px;color:#d0ded1}.fishing-footnote{display:none}
.depth-options{gap:10px;margin-bottom:14px}.depth-options button{min-height:52px;font-size:14px;padding:8px 3px}.depth-options button span{font-size:14px}
.modal-kicker,.modal-description,.modal-footer,.upgrade-card p,.upgrade-card small,.row-main small,.comparison,.comparison b,.comparison small,.stack-card p,.stack-card small,.quest-reward,.quest-row button,.collection-cell small,.collection-cell .rarity,.catch-note,.catch-stats small,.new-label{font-size:16px;line-height:1.45}.modal h2{font-size:28px}.modal h3,.row-main strong,.quest-row .row-main strong{font-size:20px;line-height:1.3}.pixel-btn,.tabs button,.stack-card .pixel-btn{font-size:16px;min-height:44px}.close-button{width:44px;height:44px;font-size:24px}.modal-kicker,.modal h2{padding-right:44px}.toast{font-size:16px;line-height:1.4}
@media(max-width:360px){.hud{left:16px;right:16px;top:16px}.brand h1{font-size:23px}.currency,.gems{font-size:16px;min-width:42px;padding:4px 5px}.wallet{gap:6px}.top-tools{top:74px;left:16px;right:16px;gap:8px}.top-tools>button{font-size:14px;gap:5px}.place-sign{top:204px;left:18px}.place-sign h2{font-size:24px}.home-panel,.fishing-panel{left:16px;right:16px;bottom:14px}.floating-note{left:16px;right:16px;bottom:224px;gap:8px;padding:9px 10px}.floating-note b{font-size:14px}.floating-note span{font-size:14px}.inventory-strip{margin-bottom:12px}.main-actions{gap:8px}.action-button{min-height:74px;gap:7px;padding:9px 2px}.action-button span{font-size:16px}.bottom-line{margin-top:12px;height:40px}.bottom-line button{font-size:14px}.back-button,.depth-tag{top:198px;font-size:14px}.back-button{left:16px}.depth-tag{right:16px}.fishing-status{margin-bottom:10px;padding:10px;font-size:14px}.fishing-meter{padding:12px 10px;margin-bottom:12px}.cast-button{font-size:22px;min-height:60px}.auto-button{min-height:60px;width:60px;font-size:16px}}
.top-tools #sound-button{flex:1.2}.top-tools #sound-label{white-space:nowrap}
/* Current pixel harbor: Settings / Quests above, the shop lives in the hut. */
.top-tools{top:82px;left:auto;right:20px;width:98px;gap:10px}.top-tools>button{flex:none!important;position:relative;width:44px;height:44px;min-width:44px;padding:4px}.top-tools img{width:32px;height:32px}.top-tools .badge{margin:0;border-radius:0;position:absolute;top:-7px;right:-6px;min-width:19px;height:19px;border:1px solid #315963;font-size:14px;line-height:17px}.place-sign{top:91px;left:20px}.place-sign h2{font-size:24px}.back-button{top:82px;max-width:calc(100% - 145px)}.depth-tag{top:144px}.main-actions{grid-template-columns:1fr 1.35fr}.home-panel{bottom:24px}
#market-button{position:absolute;background:transparent;border:0;padding:0;min-width:44px;min-height:44px;z-index:2}#market-button span{position:absolute;bottom:-25px;left:0;right:0;min-height:24px;background:#fff0cf;color:#315963;border:1px solid #5d8188;box-shadow:0 2px #416871;font-size:14px;line-height:22px;white-space:nowrap}#market-button:focus-visible{outline:3px dashed #fff0cf;outline-offset:3px}
.market-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.market-actions .action-button{min-height:96px}.settings-group{margin:22px 0}.settings-group h3{font-size:16px;margin:0 0 10px;color:#526e71}.settings-row{width:100%;min-height:64px;background:#e7ead5;border:2px solid #a8c0af;display:flex;align-items:center;gap:12px;text-align:left;padding:12px;color:#345e67;font-size:18px}.settings-row img{width:32px;height:32px;image-rendering:pixelated}.settings-row>span{flex:1}.settings-row small{font-size:14px;line-height:1.4}.settings-row>b{font-size:16px}.shop-tabs{gap:4px}.shop-tabs button{padding:8px 2px;font-size:14px;min-width:0}.shop-tabs button:last-child{flex:1.35}.comparison small{display:block;margin-top:8px}.comparison span{display:block}
.book-heading{display:flex;gap:12px;align-items:center}.book-heading>img{width:32px;height:32px;image-rendering:pixelated;flex-shrink:0}.book-heading h2{font-size:26px}.book-heading .modal-description{margin:0}.book-heading .modal-kicker{font-size:14px}.book-spread{margin-top:20px;padding:10px;background:#fff3d3;border:3px solid #8c7151;border-left:7px solid #5f6256;box-shadow:3px 3px #d4c69f}.book-spread .collection-grid{position:relative;margin:0;gap:12px}.book-spread .collection-grid:before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:#d7c8a7;pointer-events:none}.book-spread .collection-cell{border:0;background:transparent;padding:10px 0}.book-spread .collection-cell img{width:96px;height:64px;max-width:none}.book-spread .collection-cell strong{font-size:18px}.book-spread .collection-cell small,.book-spread .collection-cell .rarity{font-size:14px;line-height:1.45}.gear-summary{border-left-color:#e6c47d}.fishing-footnote{display:block;font-size:14px;line-height:1.3;margin-top:10px;color:#deebd7}.line-spool{border-radius:0}
@media(max-width:360px){.top-tools{top:76px;right:16px;left:auto;width:96px;gap:8px}.place-sign{top:87px;left:16px}.place-sign h2{font-size:21px}.back-button{top:76px;left:16px;font-size:14px}.depth-tag{top:138px;right:16px}.home-panel{bottom:20px}.book-heading{gap:8px}.book-heading h2{font-size:23px}.book-spread{padding:7px}.shop-tabs button{font-size:14px}.fishing-footnote{font-size:14px;margin-top:8px}.quest-reward{min-width:68px;font-size:14px}.quest-row .row-main small{font-size:14px}.quest-row .row-main strong{font-size:18px}.quest-symbol{font-size:14px}.settings-row{font-size:16px}}
.currency.gems{min-width:44px}

.fishing-footnote{background:#305d6b;padding:5px 6px}

/* Map chapters and readable equipment requirements. */
.book-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0}.book-tabs button{min-height:58px;border:1px solid #648c89;background:#e8eed9;color:#345e67;font-size:14px;line-height:1.3;padding:7px}.book-tabs button small{display:block;font-size:14px}.book-tabs button.active{background:#305d6b;color:#fff0cf}.book-map-title{margin:14px 0 5px!important;font-size:20px!important}.book-map-progress{font-size:14px;line-height:1.4;margin:0}.region-card{padding:14px;border:1px solid #a8c0af;background:#e8eed9;margin:14px 0}.region-card h3{margin:0 0 8px}.region-card p{font-size:16px;line-height:1.4;margin:8px 0}.region-card small{display:block;font-size:14px;line-height:1.45}.region-card button{margin:12px 0 7px}.region-missing{color:#71482d}.region-checks{padding:10px 14px;background:#e8eed9;border:1px solid #a8c0af}.region-checks p{font-size:16px;line-height:1.4;margin:10px 0}.region-checks .needed{color:#71482d}.region-checks .ready{color:#345e67}

.recipe{padding:10px;background:#e3ead5;font-size:14px!important;line-height:1.5!important}.socket-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}.socket-card{border:2px solid #648c89;background:#e8eed9;padding:10px;min-width:0}.socket-card p{font-size:14px;line-height:1.5}.socket-card button{width:100%;font-size:14px;padding:8px 2px;min-width:0}.wheel-wrap{position:relative;text-align:center;margin:18px auto;width:176px;height:192px;padding-top:16px}.wheel-pointer{position:absolute;top:-5px;left:78px;font-size:24px;color:#315963;z-index:1}.wheel-wrap canvas{width:176px;height:176px;image-rendering:pixelated;transition:transform .75s ease-out}.wheel-result{padding:12px;border:2px solid #a79769;background:#f3d78e;color:#315963;text-align:center;font-size:18px;line-height:1.4}.wheel-odds{background:#e8eed9;padding:10px;border:1px solid #a8c0af}.wheel-odds p{display:flex;justify-content:space-between;font-size:16px;margin:8px 0}@media(prefers-reduced-motion:reduce){.wheel-wrap canvas{transition:none}}

/* Readable retro UI; retain Pixelify titles and the approved pixel scene. */
body{font-size:22px}.brand h1,.place-sign h2,.modal h2{font-family:PixelTitle,monospace!important}.brand h1{text-shadow:none}
.modal-description,.modal-footer,.upgrade-card p,.upgrade-card small,.row-main small,.comparison,.comparison b,.comparison small,.stack-card p,.stack-card small,.quest-reward,.quest-row button,.collection-cell small,.collection-cell .rarity,.catch-note,.catch-stats small,.new-label,.tip-card,.region-card p,.region-card small,.region-checks p,.socket-card p,.wheel-odds p{font-size:22px;line-height:1.35;color:#294b55;text-shadow:none}
.modal h3,.row-main strong,.quest-row .row-main strong,.book-spread .collection-cell strong{font-size:25px;line-height:1.2}.modal-kicker,.recipe-caption{font-size:20px;line-height:1.25;letter-spacing:0;color:#345e67}
.pixel-btn,.tabs button,.stack-card .pixel-btn,.socket-card button,.settings-row,.action-button span{font-size:22px;line-height:1.15;min-height:44px}.shop-tabs button{font-size:20px}.shop-tabs button:last-child{flex:1.6}
.currency,.currency span,.gems,.inventory-strip,.inventory-strip b,.inventory-strip span,.bottom-line button,.bottom-line button span{font-size:22px}.book-tabs button,.book-tabs button small,.book-map-progress,.settings-row small,.settings-row>b,.book-spread .collection-cell small,.book-spread .collection-cell .rarity{font-size:20px;line-height:1.25}
.fishing-status,.gear-summary{font-size:22px;line-height:1.2}.fishing-footnote,.mini-bag,.meter-title,.pull-caption,.depth-options button,.depth-options button span,.auto-button small,#market-button span{font-size:20px;line-height:1.2}.fishing-status,.gear-summary,.mini-bag,.fishing-footnote{color:#fff0cf}.cast-button{font-size:27px}.auto-button{font-size:23px}.toast{font-size:22px;line-height:1.3}.quest-reward{min-width:82px}.quest-symbol{font-size:22px}
.recipe-list{display:grid;gap:8px;margin:12px 0}.recipe-row{display:grid;grid-template-columns:32px minmax(0,1fr) 44px;gap:9px;align-items:center;padding:10px 8px;background:#e3ead5;border:1px solid #a8c0af;color:#294b55}.recipe-row>img{width:32px;height:32px;image-rendering:pixelated}.recipe-material{min-width:0}.recipe-material>b{font-size:24px;line-height:1.15}.recipe-counts{display:flex;flex-wrap:wrap;gap:0 12px;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}.recipe-missing,.recipe-ready{display:block;font-size:20px!important;line-height:1.25!important}.recipe-missing{color:#713f2c!important}.recipe-ready{color:#294b55!important}.recipe-help{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:2px solid #648c89;background:#fff0cf;color:#294b55;font-size:28px;line-height:1;cursor:pointer}.recipe-help:focus-visible{outline:3px solid #713f2c;outline-offset:2px}.gem-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.gem-title h3{margin:0}
.help-item{display:flex;align-items:center;gap:12px}.help-item>img{width:48px;height:48px;image-rendering:pixelated;flex:none}.help-item p,.help-steps{font-size:22px;line-height:1.35;color:#294b55}.help-steps{padding-left:24px}.help-steps li{margin:12px 0}.help-source{background:#e8eed9;border:1px solid #a8c0af;padding:12px;margin:12px 0}.help-source>div{display:flex;align-items:start;justify-content:space-between;gap:10px}.help-source h3{margin:0;min-width:0}.help-source b{font-size:25px;white-space:nowrap}.help-source p,.help-source small{font-size:22px;line-height:1.3;margin:6px 0;color:#294b55}.help-source small{display:block}
@media(max-width:360px){.book-heading h2{font-size:23px}.modal-description,.modal-footer,.row-main small,.quest-row .row-main small,.socket-card p{font-size:22px}.quest-row .row-main strong{font-size:24px}.fishing-status{font-size:21px}.action-button span{font-size:22px}.book-tabs button,.book-tabs button small{font-size:20px}}

/* Recipe help targets remain clear when a long panel is scrolled. */
.modal.has-recipe-help .close-button{position:absolute;top:12px;right:12px;float:none;margin:0}

/* Gem Forge is separate from item sockets. */
.top-tools{width:152px}.source-row{display:flex;justify-content:space-between;gap:10px;padding:12px;background:#e8eed9;border:1px solid #a8c0af;margin:8px 0;font-size:22px}.gem-entry{padding:12px;border:1px solid #a8c0af;background:#e8eed9;margin:12px 0}.gem-details{display:flex;align-items:center;gap:10px;min-width:0}.gem-details>img{width:32px;height:32px;image-rendering:pixelated}.gem-details>div{min-width:0;flex:1}.gem-details strong,.gem-details b,.gem-details small{display:block;font-size:22px;line-height:1.25;overflow-wrap:anywhere}.gem-details small{font-size:20px!important}.fusion-picks{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.fusion-picks button{width:44px;min-width:44px}.gem-entry>.recipe-help{float:right}@media(max-width:360px){.top-tools{width:148px}.place-sign h2{font-size:20px}}

.forge-label{position:absolute;top:43px;left:-6px;width:56px;padding:1px;background:#fff0cf;color:#294b55;border:1px solid #648c89;font-size:20px;line-height:1.05}

/* Separate fish capacity and supplies; keep the same home-panel footprint. */
.storage-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.storage-strip .inventory-strip{width:100%;min-width:0;margin:0;padding:7px 6px;font-size:22px;gap:4px;justify-content:center}.storage-strip .inventory-strip>span{display:flex;align-items:center;gap:4px;white-space:nowrap}.storage-strip .inventory-strip img{width:20px;height:20px}.storage-strip #bag-value{display:none}.storage-strip #bag-count{font-size:20px}.backpack-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.backpack-tabs button{min-width:0;padding:4px;font-size:22px}.pack-row{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:8px;padding:10px;background:#e8eed9;border:1px solid #a8c0af;margin:10px 0}.pack-row>div{min-width:0}.pack-row h3,.pack-gem h3{margin:0;font-size:24px}.pack-row p{margin:0}.pack-row.stack-card{grid-template-columns:32px minmax(0,1fr) 44px}.pack-row.stack-card>img,.pack-gem>img{width:32px;height:32px;image-rendering:pixelated}.pack-row .bait-packs{gap:4px}.pack-row .bait-packs button{padding:4px;min-width:44px;font-size:20px}.pack-gem{display:grid;grid-template-columns:32px minmax(0,1fr) 44px;gap:8px;align-items:center;background:#e8eed9;border:1px solid #a8c0af;padding:10px;margin:10px 0}.pack-gem small{display:block;overflow-wrap:anywhere}.compact-gear .upgrade-title{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;gap:8px}.compact-gear h3{font-size:25px}.gear-stat{margin:10px 0}.gear-stat>div:first-child{display:flex;justify-content:space-between;gap:8px;font-size:22px}.stat-cue{height:10px;border:1px solid #648c89;background:repeating-linear-gradient(to right,transparent 0,transparent calc(10% - 2px),#e8eed9 calc(10% - 2px),#e8eed9 10%),linear-gradient(to right,#749d79 var(--stat-fill),#cfdbc7 var(--stat-fill));box-shadow:0 1px #fff0cf}

.tutorial-hint{position:absolute;top:162px;left:16px;right:16px;z-index:6;display:flex;gap:8px;align-items:center;padding:6px 8px;background:#fff0cf;border:2px solid #648c89;color:#294b55;font-size:22px;line-height:1.1;box-shadow:0 2px #416871}.tutorial-hint[hidden]{display:none}.tutorial-hint>span{flex:1;min-width:0}.tutorial-hint button{min-width:44px;min-height:44px;border:2px solid #648c89;background:#e8eed9;color:#294b55;font-size:22px;padding:4px}

/* Gem identity: type silhouette + quality border/pips; state badges sit beside it. */
.gem-art{display:inline-flex;align-items:center;gap:2px;width:46px;min-width:46px;height:36px;vertical-align:middle;flex:none}.gem-art .gem-base{display:block;width:32px!important;height:32px!important;min-width:32px;image-rendering:pixelated;object-fit:contain}.gem-state-badges{display:flex;flex-direction:column;gap:0;width:12px;min-width:12px}.gem-state-badges img{display:block;width:12px!important;height:12px!important;image-rendering:pixelated}.gem-info{display:inline-flex;align-items:center;justify-content:center;width:48px;min-width:48px;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer}.gem-info:focus-visible{outline:2px solid #315963;outline-offset:2px}.pack-gem{grid-template-columns:48px minmax(0,1fr) 44px}.gem-entry.is-selected{outline:2px solid #417b97;outline-offset:1px}.gem-details>.gem-info{flex:none}.socket-card>.gem-info{display:flex;margin:8px auto 0}.wheel-odds p>span,.source-row>span{display:flex;align-items:center;gap:6px}.socket-card .gem-art{margin:auto}.gem-details b{font-size:24px}.gem-info:disabled{opacity:1}

/* Shared, hard-pixel rarity presentation. Slow glint stays on the frame. */
.rarity-frame{--rarity-w:32px;--rarity-h:32px;position:relative;display:inline-block;flex:none;width:var(--rarity-w);height:var(--rarity-h);contain:paint;vertical-align:middle;overflow:hidden;line-height:0;--quality-color:#81929b}
.rarity-frame[data-quality="rare"]{--quality-color:#338dcc}.rarity-frame[data-quality="epic"]{--quality-color:#9968c7}.rarity-frame[data-quality="legendary"]{--quality-color:#dbaa35}
.rarity-framed{border:2px solid var(--quality-color);background:#eef0dc;padding:2px;box-shadow:inset 0 0 0 1px #294b55}
.rod-visual{display:inline-flex;align-items:center;gap:2px;width:86px;min-width:86px;flex:none}.rod-visual .rarity-frame{--rarity-w:72px;--rarity-h:78px}.rod-visual .rod-art{display:block;width:64px;height:70px;image-rendering:pixelated}.rod-visual .gem-state-badges{flex:none}
.rarity-pips{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:1px;pointer-events:none}.rarity-pips i{display:block;width:2px;height:2px;background:#fff3cf;border-top:1px solid #294b55}
.rarity-light{position:absolute;top:1px;left:1px;width:5px;height:2px;background:#fff8dc;box-shadow:1px 2px #f3cd69,-2px 0 #edbd51;pointer-events:none;animation:rarity-lap 5.6s steps(9,end) infinite}
.rarity-spark{position:absolute;top:1px;right:1px;width:2px;height:2px;background:#fff8dc;box-shadow:-2px 0 #fff8dc,2px 0 #fff8dc,0 -2px #fff8dc,0 2px #fff8dc;opacity:.35;pointer-events:none;animation:rarity-sparkle 8.4s steps(1,end) infinite}
@keyframes rarity-lap{0%{transform:translate(0,0)}25%{transform:translate(calc(var(--rarity-w) - 8px),0)}50%{transform:translate(calc(var(--rarity-w) - 8px),calc(var(--rarity-h) - 5px))}75%{transform:translate(0,calc(var(--rarity-h) - 5px))}100%{transform:translate(0,0)}}
@keyframes rarity-sparkle{0%,38%,62%,100%{opacity:.35}40%,60%{opacity:1}}
.upgrade-title,.compact-gear .upgrade-title{display:grid;grid-template-columns:86px minmax(0,1fr) 44px;align-items:center}.quality-label{font-size:20px!important;line-height:1.2!important}.socket-gear{display:flex;justify-content:center;margin:10px 0}.socket-card>.gem-info{width:48px;min-width:48px;margin-top:8px}.gem-details .rarity-frame{flex:none}
@media(prefers-reduced-motion:reduce){.rarity-light,.rarity-spark{animation:none!important}.rarity-light{transform:translate(calc(var(--rarity-w) - 8px),0)}.rarity-spark{opacity:.8}}

/* Socket language is player-facing; internal gem IDs stay in save/data attributes. */
.socket-card{display:flex;flex-direction:column;align-items:stretch}.socket-card>.gem-info{flex:none;align-self:center}.socket-card .socket-gem-name{font-size:22px;line-height:1.12;margin:6px 0 2px;overflow-wrap:normal}.socket-card .socket-quality,.socket-card .socket-status{display:block;font-size:20px;line-height:1.25;letter-spacing:.2px;margin:2px 0}.socket-card .socket-gem-bonus{font-size:26px;line-height:1.15;margin:4px 0}.socket-card .pixel-btn{margin-top:auto}.socket-bonus-summary{margin:14px 0 0;background:#e8eed9;border:1px solid #a8c0af;padding:10px}.socket-bonus-summary h3{font-size:24px;margin:0}.socket-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}.socket-total{display:grid;grid-template-rows:32px minmax(40px,auto) 28px;gap:2px;justify-items:center;text-align:center;min-width:0}.gem-type-icon{display:block;width:32px!important;height:32px!important;image-rendering:pixelated;flex:none}.socket-total span{font-size:22px;line-height:1.1;align-self:center}.socket-total b{font-size:26px;line-height:1.05}.socket-help-row{display:flex;gap:10px;align-items:flex-start;border:1px solid #a8c0af;background:#e8eed9;padding:10px;margin:12px 0}.socket-help-row h3{margin:0}.socket-help-row p{margin:5px 0;font-size:22px;line-height:1.2}.socket-help-row small{font-size:20px;line-height:1.2}.socket-status+.pixel-btn{margin-top:auto}.socket-card .socket-status{margin-bottom:8px}

.shop-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.shop-tabs button{min-width:0}.shop-tabs button:last-child{grid-column:span 2}.line-art{width:32px;height:32px;image-rendering:pixelated}.boat-card>img{display:block;width:192px;height:96px;max-width:100%;object-fit:contain;image-rendering:pixelated;margin:0 auto 10px}.volume-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:22px;margin:10px 0}.volume-control input{width:100%;min-height:44px;accent-color:#417b87}.catch-stage #catch-reveal-fx{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}.rarity.boss{color:#a15443}.secret-reveal .catch-stage{border-color:#dbaa35;box-shadow:inset 0 0 0 2px #fff2b6}.secret-reveal .catch-stage:before,.secret-reveal .catch-stage:after{content:none}
@media(prefers-reduced-motion:reduce){.catch-stage img{animation:none!important}.secret-reveal{animation:none!important}}

/* Character EXP and common supply shop retain the existing portrait harbor. */
.level-hud{position:absolute;z-index:3;left:20px;top:61px;width:142px;color:#294b55;font-size:18px;line-height:1.1;pointer-events:none;display:flex;gap:8px;flex-wrap:wrap}.level-hud small{font-size:16px}.xp-track{height:3px;width:100%;background:#aec5b6;overflow:hidden}.xp-track i{display:block;height:100%;width:0;background:#548b77}.shop-tabs button:last-child{grid-column:auto}.shop-tabs button{font-size:19px}.catch-exp{font-size:24px;color:#315d55}.catch-size{font-size:22px}.backpack-tabs button{font-size:19px;padding:8px 2px}.quest-reward{font-size:18px;min-width:70px}.quest-row .quest-reward button{font-size:18px;line-height:1.2}
@media(max-width:360px){.level-hud{left:16px;top:61px;width:132px;font-size:16px;gap:6px}.level-hud small{font-size:14px}.shop-tabs button,.backpack-tabs button{font-size:18px}.quest-reward,.quest-row .quest-reward button{font-size:17px}}

@media(max-width:360px){.upgrade-title,.compact-gear .upgrade-title{grid-template-columns:86px minmax(0,1fr)}.upgrade-title>button{grid-column:2;justify-self:end}}

/* Header rows flow with EXP text instead of sharing absolute coordinates. */
.hud-controls{position:absolute;z-index:3;top:calc(62px + env(safe-area-inset-top));left:20px;right:20px;display:grid;grid-template-columns:minmax(0,1fr) 152px;column-gap:12px;row-gap:12px;align-items:start;pointer-events:none}
.hud-controls .level-hud{position:static;grid-column:1 / -1;grid-row:1;width:142px;max-width:100%;min-height:26px;row-gap:3px;column-gap:8px}
.hud-controls .back-button{position:static;grid-row:2;grid-column:1;width:100%;max-width:none;min-height:44px;height:auto;line-height:1.1;white-space:normal;pointer-events:auto}
.hud-controls .top-tools{position:static;grid-row:2;grid-column:2;width:152px;pointer-events:auto}
.hud-controls .depth-tag{position:static;grid-row:3;grid-column:2;justify-self:end;pointer-events:auto}
.hud-controls .place-sign{position:static;grid-row:2;grid-column:1;min-width:0}
@media(max-width:360px){.hud-controls{left:16px;right:16px;grid-template-columns:minmax(0,1fr) 148px;column-gap:10px}.hud-controls .top-tools{width:148px}.hud-controls .level-hud{width:132px}}

.gear-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;min-height:44px;padding:8px 10px;white-space:nowrap}.gear-summary .gear-name{min-width:0;overflow:hidden;text-overflow:ellipsis}.gear-summary>span:last-child{flex:none}.depth-options button{padding:4px 2px;min-height:44px;line-height:1.05}

.game-header{position:absolute;z-index:3;top:calc(20px + env(safe-area-inset-top));left:20px;right:20px;pointer-events:none}.game-header .hud{position:static;inset:auto;pointer-events:auto}.game-header .hud-controls{position:static;margin-top:12px}.game-header .level-hud{pointer-events:none}@media(max-width:360px){.game-header{top:calc(16px + env(safe-area-inset-top));left:16px;right:16px}.game-header .hud{position:static;inset:auto}}

/* One crisp pixel close icon; retain the shared 44px keyboard/touch button. */
.modal .close-button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border:0;background:transparent;box-shadow:none;color:#315963;font-size:0;line-height:0}
.pixel-close-icon{display:block;position:relative;width:32px;height:32px;border:1px solid #829c8c;background:#e4e8cf;box-shadow:inset 1px 1px #fff5dc,0 2px #a2b29b;pointer-events:none}
.pixel-close-icon::before{content:'';position:absolute;left:8px;top:8px;width:2px;height:2px;background:currentColor;box-shadow:12px 0 currentColor,2px 2px currentColor,10px 2px currentColor,4px 4px currentColor,8px 4px currentColor,6px 6px currentColor,4px 8px currentColor,8px 8px currentColor,2px 10px currentColor,10px 10px currentColor,0 12px currentColor,12px 12px currentColor}
.modal .close-button:hover .pixel-close-icon{background:#f5edd4}
.modal .close-button:active .pixel-close-icon{translate:0 1px;box-shadow:inset 1px 1px #c4ceb4,0 1px #a2b29b}
.modal .close-button:focus-visible{outline:2px solid #315963;outline-offset:1px}