:root{--ink: #2a2226;--paper: #f4ecd8;--paper-2: #e9dcbc;--vermilion: #c8402a;--gold: #d9a83a;--indigo: #2c4876;--shadow: 0 6px 24px rgba(20, 14, 10, .35);--serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;--sans: system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#1a2445;color:var(--ink);font-family:var(--sans);user-select:none}#game{position:fixed;inset:0;width:100%;height:100%;display:block}#loading{position:fixed;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:22px;color:var(--paper);background:#1a2445}kbd{font-family:var(--sans);font-size:12px;padding:1px 6px;border-radius:4px;background:var(--ink);color:var(--paper);border-bottom:2px solid #000}#title{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,#14142826,#0a0a1999);transition:opacity .8s ease}#title.hide{opacity:0;pointer-events:none}#title .panel{max-width:560px;width:100%;text-align:center;padding:32px 36px 28px;background:var(--paper);border:3px solid var(--ink);border-radius:4px;box-shadow:var(--shadow),inset 0 0 0 6px var(--paper-2);position:relative}#title .kanji{position:absolute;right:18px;top:14px;writing-mode:vertical-rl;font-family:var(--serif);font-size:30px;font-weight:800;color:#fff;background:var(--vermilion);padding:10px 6px;border-radius:3px}#title h1{font-family:var(--serif);font-weight:800;font-size:54px;margin:0;letter-spacing:2px}#title .sub{font-family:var(--serif);font-size:18px;margin-bottom:14px;color:#5a4a3a}#title p{line-height:1.55;font-size:15px;margin:10px 0 16px}#title .controls{font-size:13px;display:grid;gap:6px;margin-bottom:22px;color:#3a3030}#begin{font-family:var(--serif);font-size:20px;font-weight:700;padding:10px 34px;cursor:pointer;background:var(--vermilion);color:#fff;border:2px solid var(--ink);border-radius:3px;box-shadow:0 3px 0 var(--ink)}#begin:hover{filter:brightness(1.08)}#begin:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}#hud.show{opacity:1}#clock{position:absolute;left:16px;top:16px;padding:10px 16px;background:#f4ecd8eb;border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow);min-width:170px}#clock .time{font-family:var(--serif);font-size:26px;font-weight:800;line-height:1}#clock .koku{font-size:12px;margin-top:4px;color:#5a4a3a}#clock .place{font-family:var(--serif);font-size:14px;margin-top:4px;font-weight:700;color:var(--indigo)}#stats{position:absolute;right:16px;top:16px;padding:8px 14px;font-size:13px;background:#f4ecd8eb;border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow)}#toast{position:absolute;left:50%;top:18%;transform:translate(-50%,-8px);max-width:min(560px,calc(100% - 32px));padding:10px 18px;text-align:center;font-family:var(--serif);font-size:18px;font-weight:700;background:#f4ecd8f2;border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s}#toast.show{opacity:1;transform:translate(-50%)}.place-toast{font-size:22px;letter-spacing:1px}#hint{position:absolute;left:50%;bottom:150px;transform:translate(-50%);font-size:13px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap}#crosshair{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffffff80;box-shadow:0 0 0 1px #0000004d}#power{position:absolute;left:50%;bottom:175px;transform:translate(-50%);width:260px;opacity:0;transition:opacity .15s}#power.show{opacity:1}#power .label{text-align:center;font-family:var(--serif);font-weight:700;color:#fff;text-shadow:0 1px 3px #000;font-size:14px;margin-bottom:4px}.bar{position:relative;height:14px;background:#2a2226bf;border:2px solid var(--ink);border-radius:2px;overflow:hidden}.bar>div{position:absolute;left:0;top:0;bottom:0}#power-fill{background:linear-gradient(90deg,#e8c060,var(--vermilion))}#bite{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.5);font-family:var(--serif);font-size:110px;font-weight:800;color:var(--vermilion);-webkit-text-stroke:4px var(--ink);opacity:0;transition:transform .12s,opacity .12s}#bite.show{opacity:1;transform:translate(-50%,-50%) scale(1);animation:shake .15s infinite}@keyframes shake{0%,to{margin-left:0}50%{margin-left:4px}}#fight{position:absolute;left:50%;bottom:150px;transform:translate(-50%);width:340px;padding:10px 14px 12px;background:#f4ecd8f0;border:2px solid var(--ink);border-radius:3px;box-shadow:var(--shadow);opacity:0;transition:opacity .2s}#fight.show{opacity:1}#fight.running{border-color:var(--vermilion)}#fight-label{font-family:var(--serif);font-weight:800;font-size:16px;text-align:center;margin-bottom:8px}#fight.running #fight-label{color:var(--vermilion)}.meter{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:8px;margin-top:5px;font-size:12px;font-weight:600}.bar.tension .zone{left:12%;width:70%;background:#78b45a59}#tension-fill{background:#e8c060;transition:background .1s}#tension-fill.danger{background:var(--vermilion)}#tension-fill.slack{background:#8a9ab0}#line-fill{background:var(--indigo)}#stamina-fill{background:#6a9a4a;right:auto}#bottom{position:absolute;left:50%;bottom:16px;transform:translate(-50%);width:min(920px,calc(100% - 32px))}#tackle-desc{font-size:12px;line-height:1.4;margin:0 auto 8px;max-width:520px;text-align:center;padding:6px 12px;background:#f4ecd8d9;border:1px solid var(--ink);border-radius:3px}#tackle-desc .jp{font-family:var(--serif)}#tackle{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;pointer-events:auto}.slot{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;min-width:0;padding:5px 9px 5px 7px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);background:#f4ecd8eb;border:2px solid var(--ink);border-radius:3px;box-shadow:0 2px 0 var(--ink)}.slot .key{position:absolute;top:-8px;left:-6px;font-size:10px;font-weight:700;background:var(--ink);color:var(--paper);padding:0 5px;border-radius:3px}.slot .swatch{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}.slot .tname{font-size:12px;font-weight:700}.slot .tkind{display:none}.slot.active{background:#fff8e4;border-color:var(--vermilion);box-shadow:0 2px 0 var(--vermilion),0 0 0 2px var(--vermilion)}.slot.locked{opacity:.45;filter:grayscale(1)}.slot.locked .tname:after{content:" 🔒";font-size:10px}#fps{position:absolute;right:16px;top:60px;font-size:11px;color:#fff;text-shadow:0 1px 2px #000;display:none}#fps.show{display:block}#catch{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;padding:16px}#catch .card{position:relative;width:min(380px,100%);margin-left:min(38vw,420px);padding:22px 26px 16px;text-align:center;background:var(--paper);border:3px solid var(--ink);border-radius:4px;box-shadow:var(--shadow),inset 0 0 0 6px var(--paper-2);transform:translateY(20px) rotate(1deg);opacity:0;transition:transform .35s,opacity .35s}#catch.show .card{transform:translateY(0) rotate(-.5deg);opacity:1}#catch .ribbon{position:absolute;top:-14px;left:50%;transform:translate(-50%);white-space:nowrap;padding:3px 14px;font-family:var(--serif);font-weight:800;color:#fff;background:var(--vermilion);border:2px solid var(--ink);border-radius:3px}#catch .ribbon.best{background:var(--gold);color:var(--ink)}#catch .jp-big{font-family:var(--serif);font-size:52px;font-weight:800;line-height:1.1}#catch .name{font-family:var(--serif);font-size:24px;font-weight:800}#catch .romaji{font-size:13px;color:#6a5a4a;font-style:italic}#catch .stars{color:var(--gold);font-size:20px;letter-spacing:2px;margin:4px 0;-webkit-text-stroke:.5px var(--ink)}#catch .measure{display:flex;justify-content:center;gap:22px;font-family:var(--serif);font-size:22px;font-weight:800;margin:6px 0}#catch p{font-size:14px;line-height:1.5;margin:8px 0 10px}#catch .dismiss{font-size:11px;color:#7a6a5a}.modal{position:fixed;inset:0;display:none;place-items:center;padding:16px;background:#0a0a1473}.modal.show{display:grid}.modal .sheet{width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:18px 22px 22px;background:var(--paper);border:3px solid var(--ink);border-radius:4px;box-shadow:var(--shadow),inset 0 0 0 6px var(--paper-2)}.modal .sheet.small{width:min(620px,100%);line-height:1.55;font-size:14px}.modal .head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px}.modal h2{font-family:var(--serif);font-weight:800;margin:0;font-size:26px}.modal h2 .jp{color:var(--vermilion);font-size:20px;margin-left:6px}.modal .head button{margin-left:auto;font-size:18px;background:none;border:2px solid var(--ink);border-radius:3px;cursor:pointer;padding:0 9px}#journal-summary{font-size:13px;color:#5a4a3a}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.entry{padding:10px 12px;border:2px solid var(--ink);border-radius:3px;background:#ece2c8;opacity:.75}.entry.caught{background:#fffaf0;opacity:1}.entry .jp{font-family:var(--serif);font-size:28px;font-weight:800}.entry .jp.unknown{color:#a89878}.entry .nm{font-family:var(--serif);font-weight:800;font-size:16px}.entry .st{color:var(--gold);font-size:13px;-webkit-text-stroke:.3px var(--ink)}.entry .info{font-size:12px;color:#5a4a3a;margin-top:2px}.entry .rec{font-size:12px;font-weight:700;margin-top:6px;color:var(--indigo)}@media(max-width:700px){#title h1{font-size:40px}#catch .card{margin-left:0;margin-top:30vh}#fight,#power{width:calc(100% - 32px)}}