/* Touch play (html.sgo-touch, set by touch.js) and the page notices of display.js. The palette and
   washes follow the loading screen and the launcher: ink, vermilion, gold, no hard frames. */
:root{--touch-ink:#07080c;--touch-vermilion:#d63a22;--touch-deep:#801a0e;--touch-gold:#e2c88f;--touch-paper:#f1ece2;--touch-dim:#aaa090;
  --touch-font:"Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif}
html.sgo-touch,html.sgo-touch body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.sgo-touch body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
html.sgo-touch #canvas{touch-action:none;transition:transform .18s ease-out}
#touch-hud{position:fixed;inset:0;z-index:1;pointer-events:none;--touch-b:46px;--touch-gap:7px;
  font:600 14px/1.1 var(--touch-font);color:var(--touch-gold);-webkit-font-smoothing:antialiased}
.touch-pad{position:absolute;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(2,var(--touch-b));gap:var(--touch-gap);
  padding:10px 8px;pointer-events:auto;touch-action:none}
.touch-left{left:env(safe-area-inset-left,0px)}
.touch-right{right:env(safe-area-inset-right,0px)}
/* In the letterbox the pads stand on an ink wash fading toward the picture. */
#touch-hud.gutter .touch-pad{border-radius:14px;background:linear-gradient(180deg,#07080c00,#07080ccc 18%,#07080ccc 82%,#07080c00)}
#touch-hud button{position:relative;display:grid;place-content:center;gap:3px;width:var(--touch-b);height:var(--touch-b);padding:0;margin:0;box-sizing:border-box;
  border:0;border-radius:12px;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;
  background:radial-gradient(120% 90% at 50% 0%,#2a1d14e6,#0b0a0ce0 70%);
  box-shadow:0 3px 12px #000a,inset 0 1px 0 #e2c88f2e,inset 0 -10px 18px -12px #d63a2259;
  transition:transform .08s ease-out,background .12s,box-shadow .12s}
#touch-hud button b{font-weight:600;font-size:calc(var(--touch-b) * .29);letter-spacing:.04em;white-space:nowrap;color:var(--touch-gold);text-shadow:0 1px 2px #000}
#touch-hud button small{font-size:calc(var(--touch-b) * .18);color:#e2c88f99;font-weight:400;white-space:nowrap;letter-spacing:.02em}
#touch-hud button.touch-skill{border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#3a2416f0,#0b0a0ce6 68%);
  box-shadow:0 3px 12px #000a,inset 0 0 0 1.5px #d63a2266,inset 0 2px 0 #e2c88f33}
#touch-hud button.touch-skill b{font-size:calc(var(--touch-b) * .38);color:#f6dfaa}
#touch-hud button.pressed{transform:scale(.93);background:radial-gradient(120% 100% at 50% 10%,#e8573a,var(--touch-vermilion) 45%,var(--touch-deep));
  box-shadow:0 0 18px #d63a2299,inset 0 1px 0 #ffd9a666}
#touch-hud button.pressed b{color:#fff6e6}
#touch-hud button.pressed small{color:#ffe7c4}
/* Over the picture (no letterbox room) the pads let the game show through. */
#touch-hud:not(.gutter) .touch-pad button:not(.pressed){opacity:.7}
#touch-hud.collapsed .touch-pad,#touch-hud.collapsed .touch-pages{display:none}
#touch-hud .touch-expand{display:none;position:absolute;top:50%;right:calc(env(safe-area-inset-right,0px) + 8px);transform:translateY(-50%);opacity:.75}
#touch-hud.collapsed .touch-expand{display:grid}
.touch-pages{position:absolute;top:50%;right:calc(env(safe-area-inset-right,0px) + var(--touch-b) * 2 + 30px);transform:translateY(-50%);
  display:grid;gap:var(--touch-gap);padding:10px;border-radius:14px;pointer-events:auto;background:#07080cd9;box-shadow:0 8px 30px #000c}
.touch-pages[hidden]{display:none}
#touch-hud .touch-pages button{width:calc(var(--touch-b) * 1.5)}
#touch-ring{position:fixed;left:0;top:0;width:60px;height:60px;margin:-30px 0 0 -30px;box-sizing:border-box;border-radius:50%;
  border:2px solid var(--touch-gold);pointer-events:none;z-index:1;opacity:0}
/* GameTouch.LONG_MS (450 ms): the ring closes in as the press approaches a right click. */
#touch-ring.charging{animation:touch-charge .45s linear forwards}
#touch-ring.fired{border-color:var(--touch-vermilion);background:#d63a2233;box-shadow:0 0 20px #d63a2280;animation:touch-fired .4s ease-out forwards}
#touch-ring.tap{animation:touch-tap .28s ease-out forwards}
@keyframes touch-charge{0%,30%{opacity:0;transform:scale(1.35)}100%{opacity:.9;transform:scale(.55)}}
@keyframes touch-fired{0%{opacity:1;transform:scale(.55)}100%{opacity:0;transform:scale(1.4)}}
@keyframes touch-tap{0%{opacity:.75;transform:scale(.25)}100%{opacity:0;transform:scale(.8)}}
/* Dialogs: portrait hint and touch settings. */
#touch-rotate,#touch-settings{position:fixed;inset:0;display:grid;place-items:center;padding:20px;box-sizing:border-box;
  color:var(--touch-paper);font:15px/1.6 var(--touch-font);-webkit-font-smoothing:antialiased}
#touch-rotate{z-index:3;text-align:center;background:radial-gradient(ellipse 70% 60% at 50% 100%,#d63a2230,transparent 70%),radial-gradient(ellipse at center,#14100cf2,#07080cfa 75%)}
#touch-settings{z-index:3;background:#07080cb3}
#touch-rotate[hidden],#touch-settings[hidden]{display:none}
.touch-rotate-card,.touch-settings-card{position:relative;max-width:360px;width:100%;box-sizing:border-box;padding:26px 24px;border-radius:14px;
  background:linear-gradient(180deg,#1a1410f2,#0b0a0cf5);box-shadow:0 24px 70px #000d,inset 0 1px 0 #e2c88f26}
.touch-rotate-card::before,.touch-settings-card::before{content:'';position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--touch-vermilion),transparent)}
.touch-rotate-icon{width:34px;height:56px;margin:0 auto 18px;border-radius:8px;box-shadow:inset 0 0 0 2px var(--touch-gold);animation:touch-turn 2.4s ease-in-out infinite}
.touch-rotate-title,.touch-settings-title{font-size:20px;margin:0 0 8px;color:var(--touch-gold);letter-spacing:.08em}
.touch-rotate-detail{font-size:13px;margin:0 0 20px;color:var(--touch-dim)}
.touch-rotate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.touch-rotate-actions button,.touch-settings-done{min-height:44px;padding:8px 22px;border:0;border-radius:22px;background:#e2c88f1f;color:var(--touch-gold);font:inherit;cursor:pointer}
.touch-rotate-actions button.primary,.touch-settings-done{background:linear-gradient(180deg,#e8573a,var(--touch-vermilion) 50%,var(--touch-deep));color:#fff6e6;box-shadow:0 4px 16px #d63a2255}
.touch-settings-card{max-width:420px;max-height:calc(100dvh - 40px);overflow:auto;-webkit-user-select:none;user-select:none}
.touch-settings-title{margin-bottom:14px}
.touch-settings-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;padding:10px 0;border-top:1px solid #e2c88f14}
.touch-settings-name{color:var(--touch-paper);font-size:14px}
.touch-settings-row small{grid-column:1 / -1;color:var(--touch-dim);font-size:11px}
.touch-segment{display:flex;justify-content:flex-end;gap:4px;padding:3px;border-radius:20px;background:#00000066;justify-self:end}
.touch-segment button{min-width:52px;min-height:36px;padding:4px 10px;border:0;border-radius:17px;background:transparent;color:var(--touch-dim);font:inherit;font-size:13px;cursor:pointer}
.touch-segment button.on{background:linear-gradient(180deg,#e8573a,var(--touch-vermilion) 55%,var(--touch-deep));color:#fff6e6;box-shadow:0 2px 10px #d63a2255}
.touch-settings-done{display:block;margin:16px auto 0;min-width:120px}
@keyframes touch-turn{0%,20%{transform:rotate(0)}50%,70%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* Network and session notices (all devices). */
#web-notice{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:3;max-width:min(520px,calc(100vw - 32px));
  box-sizing:border-box;padding:10px 18px;border-radius:20px;background:linear-gradient(180deg,#1a1410f2,#0b0a0cf2);color:var(--touch-paper);
  font:13px/1.5 var(--touch-font);box-shadow:0 8px 30px #000c,inset 0 1px 0 #e2c88f26,inset 3px 0 0 var(--touch-vermilion);pointer-events:none}
#web-notice[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  html.sgo-touch #canvas{transition:none}
  .touch-rotate-icon{animation:none;transform:rotate(-90deg)}
}
/* 專案（使用者 2026-10-31 手機版介面）The phone interface (html.sgo-touch-ui, set by display.js once the game uses it):
   the picture fills the screen in either orientation inside the safe area; the game draws its own controls. A canvas
   sized by percentages keeps its drawing buffer's 16:10 inside the body's grid, so the box is spelled out. */
html.sgo-touch-ui #canvas{position:fixed;left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px);
  width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
  height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
html.sgo-touch-ui #touch-hud,html.sgo-touch-ui #touch-rotate,html.sgo-touch-ui .touch-settings-pad{display:none!important}
/* The in-game download badge leaves the bottom (the combat buttons) for the free strip at the top: between the status
   plate and the minimap in landscape (under the PC client invitation while it shows), under the minimap (and the
   invitation, loading.css) in portrait. */
html.sgo-touch-ui #asset-loading{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 8px);width:min(300px,calc(100vw - 32px))}
@media (orientation:portrait){html.sgo-touch-ui #asset-loading{top:calc(env(safe-area-inset-top,0px) + 232px)}}
@media (orientation:landscape){html.sgo-touch-ui #web-pc-tip:not([hidden]) ~ #asset-loading{top:calc(env(safe-area-inset-top,0px) + 66px)}}