:root{font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;color:#213a32;background:#f4f0e8;font-synthesis:none;--ink:#213a32;--paper:#fffaf0;--green:#087666}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;min-width:44px;min-height:44px;border:1.5px solid var(--ink);border-radius:7px;color:var(--ink);background:var(--paper);cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ac5b28;outline-offset:2px}[hidden]{display:none!important}
.battle{display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:6px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overscroll-behavior:none;background:var(--paper)}
.battle-top{display:flex;justify-content:space-between;align-items:center;flex:0 0 40px;padding:4px 12px;background:var(--ink);color:var(--paper);border-radius:6px}.side-name{font-size:12px;min-width:70px}.opponent{text-align:right}.clock{display:flex;align-items:center;gap:6px;font-family:monospace}.clock small{font-size:8px}.clock b{font-size:28px;font-variant-numeric:tabular-nums}.clock.urgent{color:#ffcf83}.territory{height:6px;flex:none;background:#d9785a}.territory>span{display:block;height:100%;width:50%;background:#0d9479}.percentages{display:flex;align-items:center;justify-content:space-between;height:20px;flex:none;font:700 13px monospace}.percentages>b:first-child{color:#087664}.percentages>b:last-child{color:#a3422b}.percentages>span{font:10px sans-serif}
.arena-slot{display:flex;justify-content:center;align-items:center;flex:1 1 0;min-height:0;min-width:0;overflow:hidden;border-radius:5px;background:#e6e4d4}.arena-wrap{position:relative;flex:none;aspect-ratio:24/34;overflow:hidden}.arena{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.first-target{position:absolute;left:50%;top:58%;width:54px;height:54px;transform:translate(-50%,-50%);border:2px solid #fff9dc;background:#ffffff22;box-shadow:0 0 0 9px #fff9dc33;border-radius:50%;display:grid;place-items:center;color:#fff9dc;font:34px/1 sans-serif;pointer-events:none;animation:target 1.6s ease-in-out infinite}.dock{flex:none;display:flex;flex-direction:column;gap:3px}.utility{display:flex;align-items:center;gap:7px;height:44px}.utility button{height:44px;width:44px;padding:0;font-size:25px;flex:none}#pause{background:var(--ink);color:var(--paper)}.supply{display:flex;flex:1;flex-direction:column;min-width:0;gap:2px}.supply>span{font-size:10px}.supply b{font:700 19px monospace}.supply small{font:10px monospace}.supply meter{width:100%;height:8px}.supply meter::-webkit-meter-bar{background:#e2ddcd;border:0}.supply meter::-webkit-meter-optimum-value{background:#c29b32}.supply meter::-moz-meter-bar{background:#c29b32}.hand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-top:3px}.game-card{position:relative;height:84px;min-width:0;padding:2px 2px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:#e6efdf;box-shadow:0 2px 0 #254635;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.game-card.spell{border-style:dashed;background:#f5ecda}.game-card.selected{outline:3px solid #a85b27;outline-offset:0;background:#fff0bd}.game-card.prompt{outline:3px solid #ab6327;animation:card-pulse 1.6s ease-in-out infinite}.game-card.unaffordable{background:#e4e1d9;color:#617164}.game-card.unaffordable canvas{opacity:.4}.game-card .cost{position:absolute;top:3px;left:3px;width:20px;height:20px;display:grid;place-items:center;background:#f0cf72;border:1px solid #765424;border-radius:50%;font:700 12px monospace;color:#3e3624}.game-card canvas{width:56px;height:40px;pointer-events:none}.game-card b{font-size:10px;white-space:nowrap;line-height:1.2}.feedback{height:21px;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1.2;text-align:center}
#result{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;color:var(--ink);width:min(390px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:auto}#result::backdrop{background:#16382b99;backdrop-filter:blur(3px)}.result-paper{border:1px solid var(--ink);border-radius:12px;background:var(--paper);padding:26px 22px;text-align:center}.eyebrow{font:10px monospace;letter-spacing:.12em;margin:0 0 15px}h1{font-size:25px;margin:0 0 18px}.result-score{font:800 60px/1 monospace;letter-spacing:-.08em;color:var(--green);margin:18px 0 8px}.result-caption{font-size:12px;line-height:1.6;margin:0 0 24px}.primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:13px 9px;border-radius:5px;background:var(--green);color:var(--paper);font-size:13px;font-weight:700;text-decoration:none}.text-button{width:100%;font-size:12px;border:0;background:none;margin-top:7px;text-decoration:underline;text-underline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes card-pulse{50%{box-shadow:0 0 0 5px #bd833c44}}@keyframes target{50%{box-shadow:0 0 0 16px #fff9dc11}}
@media(max-height:550px){.battle{gap:2px;padding-top:3px;padding-bottom:3px}.battle-top{flex-basis:32px}.clock b{font-size:24px}.game-card{height:73px}.feedback{height:17px;font-size:9px}.game-card canvas{width:49px;height:35px}.percentages{height:18px}.result-paper{padding:18px}.result-score{font-size:46px;margin:8px}.result-caption{margin-bottom:14px}}
@media(max-width:360px){.game-card b{font-size:9px}.hand{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}