*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#e6ece7;color:#173d43;font:16px/1.5 'Noto Sans JP','Yu Gothic',sans-serif;background-image:radial-gradient(ellipse at top,#fff9ed,transparent 70%)}header{height:42px;max-width:900px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:14px}header a{color:#17454d;font-weight:900;text-decoration:none}main{padding:0 8px 24px}.cabinet{width:min(100%,840px);height:calc(100svh - 56px);min-height:560px;max-height:960px;margin:auto;padding:10px 18px 0;display:flex;flex-direction:column;position:relative;border:4px solid #064654;border-radius:30px 30px 16px 16px;background:linear-gradient(90deg,#063b47,#46b9bf 2%,#138092 5%,#116575 95%,#4cafb5 98%,#073d49);box-shadow:0 7px 0 #073947,0 15px 28px #234f4935}.cabinet::before,.cabinet::after{content:'';position:absolute;top:105px;bottom:85px;width:5px;background:linear-gradient(90deg,#648084,#eef3e9,#60777c);border-radius:4px;pointer-events:none}.cabinet::before{left:5px}.cabinet::after{right:5px}.marquee{position:relative;flex:none;text-align:center;background:linear-gradient(115deg,#fff8d8,#f6df95,#fff2c4);border:5px solid #c8a14c;border-radius:19px 19px 7px 7px;box-shadow:inset 0 0 0 2px #fff5d2,0 3px 0 #074a58;padding:4px 22px;color:#12536a}.marquee>span,.marquee p{font-size:14px;font-weight:600;margin:0}.marquee h1{font-size:clamp(24px,3.3vw,36px);line-height:1.2;margin:1px 0;font-weight:900;text-shadow:0 2px #fff}.marquee h1 span{color:#c64125}.marquee::before,.marquee::after{content:'';position:absolute;top:12px;width:10px;height:10px;border:2px solid #7c704e;border-radius:50%;background:linear-gradient(135deg,#efe7cf,#918868 45%,#525647 48%,#d4c6a0 55%)}.marquee::before{left:9px}.marquee::after{right:9px}.screen-frame{flex:1;min-height:180px;margin-top:9px;padding:5px;border:6px solid #143b43;border-radius:17px 17px 5px 5px;background:#082b36;box-shadow:inset 0 3px 9px #0009,0 2px #7fbfc0}.screen{position:relative;height:100%;overflow:hidden;border-radius:8px;background:#56bccc}canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:6px;left:6px;right:6px;display:flex;justify-content:space-between;pointer-events:none}.hud>span{background:#fffbeeee;border:1px solid white;border-radius:6px;padding:3px 9px;font-size:14px;box-shadow:0 2px 6px #153c4950}.hud b{font-size:18px;color:#b53c21}#cue{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);max-width:96%;width:max-content;background:#fff9e9ef;color:#17454d;border:2px solid white;border-radius:6px;padding:5px 10px;font-size:14px;font-weight:800;text-align:center;box-shadow:0 2px 8px #1234}#cue.bite{background:#bc371f;color:white;border-color:#ffe29c;font-size:16px}
button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible{outline:3px solid #0082b0;outline-offset:4px}button[hidden],[hidden]{display:none!important}.deck{flex:none;display:grid;grid-template-columns:1fr 1.2fr .8fr;align-items:center;gap:14px;position:relative;padding:10px 18px 12px;background:linear-gradient(105deg,#f9eec7,#e6cd84 65%,#fff0bc);border:4px solid #c4aa67;border-top:7px solid #fff1c0;border-bottom:7px solid #8f733b;border-radius:4px 4px 15px 15px;box-shadow:inset 0 -2px 4px #8b723b50,0 3px 0 #063946}.coin-panel{position:relative;display:grid;grid-template-columns:64px 1fr;gap:4px 8px;align-items:center}.coin-panel label{grid-column:1/-1;display:flex;justify-content:space-between;font-weight:800;font-size:14px}.coin-panel #insert{position:relative;width:60px;height:60px;border:5px solid #bac2bd;border-radius:50%;background:radial-gradient(circle at 35% 22%,#82d8f5,#177fab 57%,#095272 74%,#113b48 78%);box-shadow:0 4px 0 #51635f,0 5px 3px #43382080,inset 0 2px 3px #ecffff;display:flex;align-items:center;justify-content:center;color:white}.coin-panel #insert img{width:29px;height:29px}.coin-panel #insert span{position:absolute;left:68px;top:17px;width:max-content;font-size:16px;font-weight:900;color:#1b4c59;text-shadow:0 1px #fff3d9;pointer-events:none}.slot{grid-column:2;align-self:end;margin:0 0 6px;display:flex;align-items:center;gap:5px;font-size:14px}.slot span{display:none}.slot i{display:block;width:62px;height:12px;border:3px solid #a1a7a1;background:#0e292e;box-shadow:0 2px 1px #fffbe4,inset 0 2px 3px #000}.small{grid-column:1/-1;justify-self:start;background:#fdf2cd;border:1px solid #8c7850;border-radius:4px;min-height:44px;padding:0 12px;font-size:14px;color:#4f492f}.main-control{display:flex;flex-direction:column;align-items:center}#action{width:106px;height:84px;border:6px solid #c4c6b9;border-radius:50%;background:radial-gradient(ellipse at 36% 20%,#ffb29a,#e85334 51%,#b02d1d 76%,#6e281c 79%);box-shadow:0 5px 0 #596761,0 7px 4px #72583180,inset 0 2px 3px #ffe7bb;color:#fff;font-size:16px;line-height:1.35;font-weight:900;padding:8px;text-shadow:0 1px 2px #78231a}#action:disabled{filter:saturate(.55);color:#fff4e0}#insert:disabled{filter:saturate(.35)}#action:hover:not(:disabled),#insert:hover:not(:disabled){filter:brightness(1.1)}#action:active:not(:disabled),#insert:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #596761,inset 0 2px 3px #fff5}.main-control>span{font-size:14px;text-align:center;min-height:42px;line-height:1.45;margin-top:6px;max-width:230px}.meter{text-align:center}.meter>span{font-size:14px}.meter strong{display:block;background:#123640;color:#ffedb0;border:4px solid #949983;border-radius:4px;font:700 29px monospace;letter-spacing:.1em;padding:3px 8px;margin:4px 0}.meter button{background:#fff7de;border:1px solid #a18b53;border-radius:4px;font-size:14px;min-height:44px;padding:4px 10px;color:#3e4535}
#receive-prompt{position:absolute;bottom:106px;left:50%;transform:translateX(-50%);z-index:5;width:calc(100% - 40px);padding:5px 10px;border:2px solid #98701d;border-radius:5px;background:#fff4b9;color:#453110;font-size:14px;font-weight:800;box-shadow:0 2px 5px #163f4660}.lower{display:flex;align-items:center;gap:16px;flex:none;min-height:94px;padding:9px 16px}.tray{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;flex:1;height:76px;min-width:0;overflow:hidden;border:5px solid #9eaaa5;border-radius:5px 5px 16px 16px;background:linear-gradient(#092c35,#48676b);box-shadow:inset 0 7px 10px #0009,0 2px 0 #052f39;color:#fff}.tray>span:not(.tray-coins){font-size:14px;line-height:1.2;position:relative;z-index:2}.tray>b{display:block;z-index:2;font-size:16px;line-height:1.3;background:#173d45;color:#fff9d9;padding:1px 9px;border-radius:3px;margin:1px 0 0}.tray-coins{position:absolute;left:0;right:0;bottom:0;height:28px;overflow:hidden;pointer-events:none}.out-coin{position:absolute;width:30px;height:30px;bottom:-3px;animation:coin-out .55s ease-out both}.tray.has-medals{border-color:#ffe189;box-shadow:inset 0 7px 10px #0009,0 0 0 2px #f1ba39}.tray.has-medals>b{background:#ffe79b;color:#403010}.tray.has-medals:hover{border-color:#fff8c2}.tray.collected{animation:collect-glow .5s ease-out}.brand{color:#fff;font-size:14px;text-align:center;width:110px}.brand span{display:block}.brand b{display:block;color:#fff1ae;font:700 26px monospace}.cabinet-foot{flex:none;height:8px;background:linear-gradient(#a3b7b5,#294750);border-radius:0 0 9px 9px}.flying-coin{position:absolute;width:35px;height:35px;pointer-events:none;z-index:10;animation:coin-in .38s ease-in forwards}.guide{max-width:840px;background:#fffdf6;border:1px solid #c9d8cc;border-radius:12px;padding:24px;margin:35px auto;line-height:1.8}.guide li{margin:8px 0}#fish-list{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}#fish-list button{min-height:60px;background:#e5f2ec;color:#173d43;border:1px solid #99b8aa;border-radius:5px;font-size:14px;padding:8px 4px}#fish-list b{display:block;color:#aa371e}#fish-list button:hover{background:#d1e8df}
@keyframes coin-in{0%{transform:translate(0,-30px);opacity:1}100%{transform:translate(18px,28px) rotateY(80deg) scale(.2);opacity:0}}@keyframes coin-out{0%{transform:translateY(-45px) rotate(-60deg)}100%{transform:translateY(0)}}@keyframes collect-glow{0%{border-color:#fff8c0}100%{border-color:#9eaaa5}}
@media(max-width:640px){header{height:34px;padding:0 5px}main{padding:0 4px 20px}.cabinet{height:calc(100svh - 43px);min-height:505px;padding:6px 7px 0;border-width:3px;border-radius:22px 22px 12px 12px}.marquee{padding:3px 14px;border-width:4px}.marquee h1{font-size:26px}.marquee p{font-size:14px}.screen-frame{margin-top:6px;border-width:4px;padding:3px;min-height:165px}.deck{grid-template-columns:1fr 1.15fr;gap:4px 10px;padding:7px 10px;border-width:3px;border-top-width:5px;border-bottom-width:5px}.coin-panel{grid-template-columns:52px 1fr;gap:2px 5px}.coin-panel #insert{width:50px;height:50px;border-width:4px}.coin-panel #insert img{width:25px;height:25px}.coin-panel #insert span{left:53px;top:9px;font-size:14px}.slot i{width:45px;height:10px}.small{position:absolute;right:0;bottom:0;padding:0 6px;min-height:44px;background:transparent;border:0;text-decoration:underline}.coin-panel{padding-bottom:14px}.main-control>span{min-height:40px;margin-top:4px}#action{width:91px;height:72px;font-size:16px;border-width:5px}.meter{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:8px}.meter strong{font-size:23px;padding:1px 9px;margin:0;border-width:3px}.meter button{min-height:44px;padding:2px 8px}.lower{padding:6px 3px;min-height:86px;gap:9px}.tray{height:74px}.brand{width:82px;font-size:14px}.brand b{font-size:23px}#receive-prompt{bottom:92px;width:calc(100% - 20px);font-size:14px;line-height:1.3;padding:3px 5px}#fish-list{grid-template-columns:repeat(3,1fr)}.guide{padding:18px;margin-top:28px}.hud>span{padding:2px 5px}.hud b{font-size:16px}}
@media(max-height:650px) and (min-width:641px){.cabinet{height:auto;min-height:560px}.screen-frame{height:280px;flex:none}}
@media(prefers-reduced-motion:reduce){.flying-coin,.out-coin,.tray.collected{animation:none}}
#impact{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) rotate(-8deg);color:#fff3bb;font-size:clamp(32px,6vw,64px);font-weight:900;text-shadow:3px 3px 0 #a93820,-2px -2px 0 #a93820,2px -2px 0 #a93820,-2px 2px 0 #a93820;pointer-events:none;animation:hit-pop .45s ease-out both}
#impact span{display:block;font-size:20px;text-align:center}
.screen.hooked canvas{animation:hook-shake .38s ease-out}.screen.hooked{box-shadow:inset 0 0 0 4px #f6d685}
@keyframes hook-shake{0%,100%{transform:translate(0)}15%{transform:translate(-5px,2px)}35%{transform:translate(5px,-2px)}55%{transform:translate(-3px,1px)}75%{transform:translate(2px,-1px)}}
@keyframes hit-pop{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.7)}40%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
#fish-list button[aria-pressed=true]{border:2px solid #176e82;background:#d2eaf0}
@media(max-width:640px){#impact span{font-size:18px}}
@media(prefers-reduced-motion:reduce){.screen.hooked canvas,#impact{animation:none}.coin-panel #insert{transition:none}}


#escape-notice{position:absolute;top:22%;left:50%;transform:translateX(-50%);background:#fff2dbeF;border:2px solid #bb5a35;color:#9d321c;border-radius:8px;font-size:18px;font-weight:900;padding:8px 16px;white-space:nowrap;box-shadow:0 5px 14px #214c5460}
#catch{width:min(75%,520px);background:linear-gradient(135deg,#fffdf3,#ffeab4);box-shadow:0 8px 0 #aa813c66,0 16px 35px #173f4980;padding:20px;top:44%;transform:translate(-50%,-50%)}#catch>strong{display:block;font-size:22px;color:#1e5e6f}#catch>b{display:block;font-size:38px;color:#c54822;text-shadow:1px 2px #fff;margin:6px 0}#catch>span{display:block;font-size:14px;line-height:1.7}.catch-gallery{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-top:8px}.catch-fish{display:block;width:100px;height:60px;background-size:200% 300%;background-repeat:no-repeat}
@media(max-width:640px){#catch{padding:12px;width:85%;top:46%}#catch>strong{font-size:18px}#catch>b{font-size:28px}.catch-fish{width:70px;height:40px}#escape-notice{font-size:16px;padding:6px 10px;top:25%}}



@media(max-width:640px) and (max-height:650px){.screen-frame{min-height:115px}.marquee>span{display:none}.marquee p{font-size:14px;line-height:1.3}.deck{padding-top:4px;padding-bottom:4px}.main-control>span{min-height:40px}.cabinet{min-height:505px}}
.coin-panel{padding-bottom:0;grid-template-rows:auto 60px 44px}.slot{grid-row:3;grid-column:1;align-self:center;margin:0}.small{position:static;grid-row:3;grid-column:2;justify-self:start;align-self:center;min-height:44px;padding:0 8px;background:#fff2cb;border:1px solid #a89664;text-decoration:none}.brand span{line-height:1.3}.brand b{display:inline;margin:0 3px}
@media(max-width:640px){.coin-panel{grid-template-rows:auto 50px 44px}.small{padding:0 6px}}
.tray-coins{height:24px}.main-control>span{text-wrap:balance}
.coin-panel #insert span{pointer-events:auto;padding:8px 0;top:5px}@media(max-width:640px){.coin-panel #insert span{top:1px}}
.tray-coins{height:20px}