:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
html,body{width:100%;height:100%;overflow:hidden;background:#091323;margin:0;overscroll-behavior:none}
#game-stage{position:fixed;inset:0;overflow:hidden;touch-action:none}
#canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100vw,160vh);height:min(100vh,62.5vw);display:block;touch-action:none}
#phone-controls,#phone-tools{display:none;position:fixed;inset:0;pointer-events:none;z-index:20}
#phone-controls button,#phone-tools button{pointer-events:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border:1px solid #adbed7;border-radius:14px;background:#14273deb;color:#ffe5aa;font:600 16px system-ui;min-width:44px;min-height:44px;box-shadow:0 2px 8px #0008}
#phone-controls button{touch-action:none;font-size:22px}
#phone-controls button[data-held=true]{background:#466d92;transform:translateY(2px)}
.dpad{display:grid;grid-template:repeat(3,52px)/repeat(3,52px);gap:2px;position:absolute;left:max(10px,var(--safe-left));bottom:calc(18px + var(--safe-bottom))}
.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}
.actions{display:grid;grid-template:58px 58px/58px 58px;gap:9px;position:absolute;right:max(14px,var(--safe-right));bottom:calc(24px + var(--safe-bottom))}
.actions .a{grid-area:1/2;border-radius:50%!important}.actions .b{grid-area:2/1;border-radius:50%!important}
.phone-toolbar{display:flex;gap:6px;position:absolute;right:calc(8px + var(--safe-right));top:calc(6px + var(--safe-top))}
.phone-toolbar button{padding:0 12px}
.rotate-hint{display:none;position:absolute;top:calc(52px + 62.5vw + var(--safe-top));width:100%;text-align:center;font:14px system-ui;color:#c8d8ea;pointer-events:none}
body.phone-layout #phone-controls,body.phone-layout #phone-tools{display:block}
body.phone-layout #game-stage{top:calc(52px + var(--safe-top));bottom:calc(194px + var(--safe-bottom));left:var(--safe-left);right:var(--safe-right)}
body.phone-layout #canvas{top:0;transform:translateX(-50%);width:min(100%,calc((100dvh - 246px - var(--safe-top) - var(--safe-bottom))*1.6));height:auto;aspect-ratio:8/5}
body.phone-layout .rotate-hint{display:block}
body.controls-hidden #phone-controls{display:none}
body.phone-layout.controls-hidden #game-stage{bottom:var(--safe-bottom)}
body.phone-layout.controls-hidden #canvas{width:min(100%,calc((100dvh - 52px - var(--safe-top) - var(--safe-bottom))*1.6))}
body.controls-hidden .rotate-hint{display:none}
@media(orientation:landscape){
 body.phone-layout #game-stage{top:var(--safe-top);bottom:var(--safe-bottom)}
 body.phone-layout #canvas,body.phone-layout.controls-hidden #canvas{top:50%;transform:translate(-50%,-50%);width:min(100%,calc((100dvh - var(--safe-top) - var(--safe-bottom))*1.6))}
 .dpad{grid-template:repeat(3,44px)/repeat(3,44px);bottom:calc(6px + var(--safe-bottom));left:calc(6px + var(--safe-left))}
 .actions{grid-template:52px 52px/52px 52px;gap:6px;bottom:calc(10px + var(--safe-bottom));right:calc(8px + var(--safe-right))}
 body.phone-layout .rotate-hint{display:none}
 #phone-controls button{background:#14273dc9}
}
#reading-shield{display:none;position:absolute;inset:0;z-index:15;touch-action:none;cursor:grab}
body.reading #reading-shield{display:block}
body.reading #phone-controls{display:none}
body.reading #game-stage{inset:0}
body.reading #canvas{width:var(--read-width)!important;height:var(--read-height)!important;left:var(--read-x)!important;top:var(--read-y)!important;transform:none!important;max-height:none;max-width:none}
body.reading .rotate-hint{display:none}
.reading-caption{display:none;position:fixed;bottom:calc(8px + var(--safe-bottom));left:50%;transform:translateX(-50%);background:#091323ed;border-radius:12px;padding:10px 16px;color:#fff;font:14px system-ui;z-index:22;pointer-events:none;white-space:nowrap}
body.reading .reading-caption{display:block}
.trainer-name{position:fixed;inset:0;background:#071321f5;z-index:100;color:#ffdfa0;display:flex;align-items:center;justify-content:center;font:20px system-ui;padding:24px;box-sizing:border-box;overflow:auto}
.trainer-name form{width:min(420px,100%);display:grid;gap:14px;margin:auto}.trainer-name input,.trainer-name button{font:22px system-ui;border:2px solid #d9b967;border-radius:8px;padding:14px;background:#14243a;color:white;box-sizing:border-box;width:100%}.trainer-name h1{font-size:26px;margin:0}
@media(max-height:450px){.trainer-name{align-items:flex-start;padding:12px}.trainer-name form{gap:8px}.trainer-name h1{font-size:20px}.trainer-name input,.trainer-name button{font-size:18px;padding:10px}}