/* Web loading screen: the 碧眼三國 key visual full-bleed (專案 2026-10-31: art/loading-keyart*.webp and loading-logo.webp,
   tools/assets/build_web_keyart.py; a portrait painting for phones upright) under one panel built from the game's own
   interface pieces (專案（使用者 2026-10-31「你這設計 應該要符合遊戲本身主題 三國主題 三國的UI 不是自創」）the dark-brown
   frame, the title plate, the gold orb, the orange bar, the copper button; tools/assets/build_web_ui_art.py), and the way
   to the PC client. loading.js owns every figure. */
@font-face{font-family:'Sango Headline';src:url(loading-title.woff2) format('woff2');font-display:swap}
#loading{--ink:#07080c;--vermilion:#d63a22;--cream:#f3e6c8;--gold:#e8c77a;--tan:#bfa98a;--soft:#d8c7a6;--paper:#f1ece2;
  --headline:'Sango Headline','Noto Serif TC','Songti TC','PMingLiU',serif;
  position:fixed;inset:0;z-index:2;overflow:hidden;background:var(--ink);color:var(--cream);font:15px/1.6 "Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#loading[hidden],#loading-retry[hidden]{display:none}
.loading-art{position:absolute;inset:-3%;background:var(--ink) url(loading-keyart.webp) 74% 34%/cover no-repeat;animation:loading-drift 26s ease-in-out infinite alternate;will-change:transform}
.loading-art::after{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 55% at 8% 100%,#d63a2230,transparent 70%),
  linear-gradient(0deg,var(--ink) 2%,#07080cb3 18%,transparent 44%),
  linear-gradient(180deg,#07080c99,transparent 20%),
  linear-gradient(90deg,#07080cb3 0%,#07080c66 30%,transparent 56%)}
/* Embers drifting up through the smoke (transform-only, so the compositor moves them). */
.loading-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loading-embers::before,.loading-embers::after{content:'';position:absolute;left:0;right:0;top:0;height:200%;opacity:.75;animation:loading-rise 18s linear infinite;
  background-image:radial-gradient(circle at 20% 30%,#ffb46ecc 0 1.5px,transparent 2.5px),radial-gradient(circle at 70% 80%,#e2c88fb3 0 1px,transparent 2px),radial-gradient(circle at 45% 60%,#d63a22cc 0 1.5px,transparent 3px),radial-gradient(circle at 88% 15%,#ffcf8a99 0 1px,transparent 2px);
  background-size:340px 420px,260px 300px,420px 520px,300px 360px}
.loading-embers::after{animation-duration:29s;opacity:.45;background-size:520px 600px,380px 460px,600px 700px,460px 540px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%)}
.loading-card{position:relative;box-sizing:border-box;height:100%;display:flex;flex-direction:column;align-items:flex-start;
  padding:max(24px,env(safe-area-inset-top)) max(clamp(20px,5vw,72px),env(safe-area-inset-right)) max(clamp(20px,5vh,52px),env(safe-area-inset-bottom)) max(clamp(20px,5vw,72px),env(safe-area-inset-left));
  animation:loading-enter .9s cubic-bezier(.2,.7,.2,1) both}
/* The game's logo stands for the brand line (its text stays for screen readers). */
.loading-eyebrow{flex:none;margin:0 0 auto;width:clamp(230px,28vw,420px);aspect-ratio:900/328;background:url(loading-logo.webp) left center/contain no-repeat;color:transparent;font-size:0;filter:drop-shadow(0 6px 22px #000c)}
/* The panel: the main interface's dark-brown corner frame, its title on the brown plate. */
.loading-panel{flex:none;box-sizing:border-box;width:min(520px,100%);margin-top:20px;padding:2px 8px 8px;border:13px solid transparent;border-image:url(loading-frame.png) 13 fill stretch}
#loading-title{display:block;box-sizing:border-box;width:max-content;min-width:220px;max-width:100%;height:30px;margin:0 auto 10px;padding:0 4px;
  border-style:solid;border-color:transparent;border-width:5px 30px;border-image:url(loading-plate.png) 5 30 fill stretch;
  font:400 15px/20px var(--headline);letter-spacing:.2em;text-indent:.2em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--cream);text-shadow:0 1px 0 #000,0 0 3px #000}
.loading-meter{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.loading-orb{position:relative;flex:none;width:46px;height:46px;background:url(loading-orb.png) center/100% 100% no-repeat}
.loading-orb::after{content:'';position:absolute;inset:3px;border-radius:50%;border:2px solid transparent;border-top-color:#ffe29a;animation:loading-spin 1.4s linear infinite}
#loading-value{flex:none;white-space:nowrap;font:400 30px/1 var(--headline);font-variant-numeric:tabular-nums;color:var(--cream);text-shadow:0 1px 0 #000,0 0 6px #000}
#loading-label{min-width:0;margin-left:auto;font-size:12px;line-height:1.5;color:var(--soft);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The bar: a dark sunken track with the 戰技 window's orange fill. */
#loading progress,#asset-loading progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:14px;box-sizing:border-box;border:1px solid #6b4426;border-radius:0;
  background:#0d0906;box-shadow:inset 0 1px 3px #000,0 0 0 1px #0009;color:#f08a2a;accent-color:#f08a2a;overflow:hidden}
#loading progress::-webkit-progress-bar,#asset-loading progress::-webkit-progress-bar{background:#0d0906}
#loading progress::-webkit-progress-value,#asset-loading progress::-webkit-progress-value{background:url(loading-bar.png) 0 0/100% 100%;transition:width .3s ease-out}
#loading progress::-moz-progress-bar,#asset-loading progress::-moz-progress-bar{background:url(loading-bar.png) 0 0/100% 100%}
/* No amount known (initializing, preparing): a light runs along the track, never a fake fill. */
#loading progress:indeterminate,#asset-loading progress:indeterminate{background:linear-gradient(90deg,#f08a2a00,#f08a2ae6 55%,#ffe29a 80%,#ffe29a00) -30% 0/30% 100% no-repeat,#0d0906!important;animation:loading-run 1.6s cubic-bezier(.5,0,.5,1) infinite}
#loading progress:indeterminate::-webkit-progress-bar,#asset-loading progress:indeterminate::-webkit-progress-bar{background:transparent!important}
#loading progress:indeterminate::-moz-progress-bar,#asset-loading progress:indeterminate::-moz-progress-bar{background:transparent}
#loading-detail{margin:6px 0 0;min-height:1.5em;font-size:12.5px;line-height:1.5;color:var(--soft);overflow-wrap:anywhere}
/* The four stages: a tick when done, the orb on the current one, an empty ring ahead. */
.loading-steps{list-style:none;margin:6px 0 0;padding:0;font:400 14px/1 var(--headline);letter-spacing:.06em;color:var(--cream)}
.loading-steps li{display:flex;align-items:center;gap:10px;height:28px;opacity:.55;transition:opacity .3s}
.loading-steps li::before{content:'';flex:none;width:22px;height:22px;background:radial-gradient(circle,transparent 3.5px,#8a6a48 4px,#8a6a48 5px,transparent 5.5px)}
.loading-steps li.done{opacity:1}
.loading-steps li.done::before{background:url(loading-check.png) center/18px 17px no-repeat}
.loading-steps li[aria-current]{opacity:1;color:var(--gold)}
.loading-steps li[aria-current]::before{background:url(loading-orb.png) center/22px 22px no-repeat;animation:loading-beat 1.6s ease-in-out infinite}
.loading-hint{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--tan)}
/* The copper button (Btn01) of the game's windows. */
#loading-retry,#web-pc-ask-go,#web-pc-ask-stay{display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:10px auto 0;min-width:200px;height:48px;padding:0;
  border-style:solid;border-color:transparent;border-width:13px 22px;border-image:url(loading-button.png) 14 24 fill stretch;background:none;cursor:pointer;
  font:900 17px/1 var(--headline);letter-spacing:.24em;text-indent:.24em;color:#3a2414;text-decoration:none;text-shadow:0 1px 0 #fff8}
#loading-retry:active,#web-pc-ask-go:active,#web-pc-ask-stay:active{border-image-source:url(loading-button-down.png)}
#loading-retry:focus-visible,#web-pc-ask-go:focus-visible,#web-pc-ask-stay:focus-visible{outline:2px solid var(--gold,#e8c77a);outline-offset:3px}
#loading.failed .loading-steps,#loading.failed .loading-orb::after{display:none}
#loading.failed #loading-title{color:#ff9a80}
/* The PC client: the same frame and a copper button; top right on wide screens, under the panel on phones upright. */
.loading-pc{position:absolute;top:max(18px,env(safe-area-inset-top));right:max(clamp(20px,4vw,56px),env(safe-area-inset-right));display:flex;align-items:center;gap:12px;
  box-sizing:border-box;max-width:min(460px,44vw);padding:0 0 0 4px;border:13px solid transparent;border-image:url(loading-frame.png) 13 fill stretch;
  color:var(--soft);font-size:12.5px;line-height:1.45;text-decoration:none}
.loading-pc b{display:block;color:var(--gold);font-weight:700;letter-spacing:.08em}
.loading-pc-go{flex:none;display:flex;align-items:center;height:40px;box-sizing:border-box;border-style:solid;border-color:transparent;border-width:13px 18px;
  border-image:url(loading-button.png) 14 24 fill stretch;font:900 14px/1 var(--headline);letter-spacing:.1em;color:#3a2414;white-space:nowrap;text-shadow:0 1px 0 #fff8}
.loading-pc:active .loading-pc-go{border-image-source:url(loading-button-down.png)}
.loading-pc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* After loading: the same invitation once per visit, out of the way at the top, gone by itself. */
#web-pc-tip,#web-update{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;box-sizing:border-box;
  width:max-content;max-width:calc(100vw - 24px);padding:0 0 0 2px;border:13px solid transparent;border-image:url(loading-frame.png) 13 fill stretch;
  color:#f3e6c8e6;font:12.5px/1.5 "Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif;transition:opacity .35s ease-out}
/* The in-game plates stay laid out and only fade, so showing one adds no layer over the running WebGL canvas; no
   backdrop blur (it re-blurred the game's picture every frame while shown). */
#web-pc-tip[hidden],#web-update[hidden]{display:flex;opacity:0;pointer-events:none}
#asset-loading[hidden]{display:block;opacity:0;pointer-events:none}
#web-pc-tip b,#web-update b{color:#e8c77a}
#web-pc-tip a,#web-update-go{flex:none;display:flex;align-items:center;height:36px;box-sizing:border-box;padding:0;border-style:solid;border-color:transparent;border-width:11px 16px;
  border-image:url(loading-button.png) 14 24 fill stretch;background:none;font:900 13px/1 'Sango Headline','Noto Serif TC',serif;letter-spacing:.08em;color:#3a2414;
  text-decoration:none;white-space:nowrap;text-shadow:0 1px 0 #fff8;cursor:pointer}
#web-pc-tip a:active,#web-update-go:active{border-image-source:url(loading-button-down.png)}
#web-pc-tip button{flex:none;width:30px;height:30px;padding:0;border:0;background:url(loading-close.png) center/26px 26px no-repeat;color:transparent;font-size:0;cursor:pointer}
/* The phone interface keeps its buttons along the top edge: the invitation sits over the scene instead. Phones: in
   landscape the free strip at the top between the status plate and the minimap (never over the character), in
   portrait under the minimap. The phone interface scales with the short side (touch_ui_scale): the plate ends at
   64.4vmin, the minimap starts 59.5vmin from the right. A screen narrower than 2:1 (tablets, 16:9 phones) has no
   such strip and gets the invitation over the top middle. */
html.sgo-touch-ui #web-pc-tip{top:calc(env(safe-area-inset-top,0px) + 8px);left:51%;width:min(380px,42vw)}
@media (orientation:landscape) and (min-aspect-ratio:2/1){html.sgo-touch-ui #web-pc-tip{left:calc(env(safe-area-inset-left,0px) + 64.4vmin + 6px);
  transform:none;width:min(400px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 124vmin - 12px))}}
@media (orientation:portrait){html.sgo-touch-ui #web-pc-tip{top:calc(env(safe-area-inset-top,0px) + 156px);left:50%;width:max-content}}
/* A new release while the page runs (GameLoading.checkRelease): the same plate as the invitation, in its place (the
   invitation gives way). */
#web-update{z-index:4}
#web-update b{display:block;font-size:13.5px}
#web-update-later{flex:none;min-height:36px;padding:6px 10px;border:0;background:none;font:inherit;color:#f3e6c8b3;cursor:pointer;white-space:nowrap}
html.sgo-touch-ui #web-update{top:calc(env(safe-area-inset-top,0px) + 8px);width:min(420px,calc(100vw - 24px))}
@media (orientation:landscape) and (min-aspect-ratio:2/1){html.sgo-touch-ui #web-update{left:calc(env(safe-area-inset-left,0px) + 64.4vmin + 6px);
  transform:none;width:min(420px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 124vmin - 12px))}}
@media (orientation:portrait){html.sgo-touch-ui #web-update{top:calc(env(safe-area-inset-top,0px) + 156px)}}
/* PC browsers: once per visit after entering a map, the case for the PC client on the game's parchment window (the
   top invitation stays for later); 不再提示 is remembered (loading.js showTip). */
#web-pc-ask{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:#000a;font:13px/1.6 "Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif}
#web-pc-ask[hidden]{display:none}
.pc-ask-panel{position:relative;box-sizing:border-box;width:min(400px,calc(100vw - 32px));padding:2px 10px 10px;border:13px solid transparent;border-image:url(loading-frame.png) 13 fill stretch;
  color:var(--cream,#f3e6c8);text-align:center}
#web-pc-ask-title{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:220px;height:40px;margin:-6px auto 10px;
  border-style:solid;border-color:transparent;border-width:11px 24px;border-image:url(loading-plate-red.png) 12 26 fill stretch;
  font:400 16px/1 'Sango Headline','Noto Serif TC',serif;letter-spacing:.24em;text-indent:.24em;color:#f3e6c8;text-shadow:0 1px 0 #000,0 0 3px #000}
#web-pc-ask-close{position:absolute;top:-8px;right:-8px;width:36px;height:36px;padding:0;border:0;background:url(loading-close.png) center/100% 100% no-repeat;cursor:pointer}
.pc-ask-body{box-sizing:border-box;padding:4px 10px 8px;border:16px solid transparent;border-image:url(loading-parchment.png) 16 fill stretch;color:#3a2414;text-align:left}
.pc-ask-logo{width:200px;aspect-ratio:900/328;margin:0 auto 4px;background:url(loading-logo.webp) center/contain no-repeat;color:transparent;font-size:0}
.pc-ask-body ul{list-style:none;margin:0;padding:0;font-weight:700}
.pc-ask-body li{display:flex;align-items:center;gap:8px;padding:3px 0}
.pc-ask-body li::before{content:'';flex:none;width:18px;height:17px;background:url(loading-check.png) center/100% 100% no-repeat}
#web-pc-ask-go{width:100%;margin-top:12px}
#web-pc-ask-stay{width:72%;height:40px;margin-top:6px;font-size:14px;letter-spacing:.12em;text-indent:.12em}
.pc-ask-never{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--tan,#bfa98a);cursor:pointer}
.pc-ask-never input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;background:url(loading-checkbox.png) center/100% 100% no-repeat;cursor:pointer}
.pc-ask-never input:checked{background:url(loading-check.png) 1px -1px/17px 16px no-repeat,url(loading-checkbox.png) center/100% 100% no-repeat}
/* In-game downloads: the frame's plate at the bottom that never blocks play. */
#asset-loading{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:0 4px 2px;z-index:2;pointer-events:none;
  border:13px solid transparent;border-image:url(loading-frame.png) 13 fill stretch;color:#f3e6c8e6;
  font:12px/1.6 "Microsoft JhengHei","PingFang TC","Noto Sans TC",system-ui,sans-serif;transition:opacity .35s ease-out}
#asset-loading progress{height:8px}
#asset-loading-text{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:5px;letter-spacing:.03em}
@keyframes loading-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}}
@keyframes loading-rise{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,-50%,0)}}
@keyframes loading-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes loading-beat{50%{filter:brightness(1.35)}}
@keyframes loading-spin{to{transform:rotate(360deg)}}
@keyframes loading-run{to{background-position:130% 0,0 0}}
/* Upright screens: the portrait painting. */
@media (orientation:portrait){
  .loading-art{background-image:url(loading-keyart-portrait.webp);background-position:62% 20%}
  .loading-card{align-items:stretch}
  .loading-eyebrow{align-self:center;background-position:center}
  .loading-panel{align-self:center}
  .loading-pc{position:static;align-self:center;width:min(520px,100%);max-width:none;margin-top:10px}
}
/* Phones upright (專案（使用者 2026-10-31「這個設計會擋到背景的人物」）): the painting starts 12.3 % down under an ink band that
   holds the logo, so the logo never covers the lord's head; the panel over the water below. The game's own phone
   login draws the same picture (engine/web/display.cpp web_picture: the band, the fade, the painting covered and
   centred), so the loading screen hands over to it without a jump. */
@media (max-width:700px) and (orientation:portrait){
  .loading-art{inset:0 -2%;animation:none;background-color:var(--ink);background-size:auto max(87.7vh,177.7vw);background-position:62% calc(50vh - .43 * max(87.7vh,177.7vw))}
  .loading-art::after{background:radial-gradient(ellipse 90% 40% at 50% 100%,#d63a2224,transparent 70%),linear-gradient(0deg,var(--ink) 6%,#07080ce6 30%,#07080c66 46%,transparent 60%),
    linear-gradient(180deg,var(--ink) calc(50vh - .43 * max(87.7vh,177.7vw)),#07080c00 calc(50vh - .342 * max(87.7vh,177.7vw)))}
  .loading-card{padding:max(20px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .loading-eyebrow{width:min(68vw,300px)}
  .loading-panel{width:100%}
  .loading-pc{width:100%;font-size:12px}
  #loading-value{font-size:28px}
  #web-pc-tip{font-size:12px}
}
/* Phones on their side and other short screens: a compact left column, the stages as one row. */
@media (max-height:520px) and (orientation:landscape){
  .loading-card{padding:max(10px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .loading-eyebrow{width:clamp(130px,20vw,200px)}
  .loading-panel{width:min(440px,58vw);margin-top:6px;padding:0 6px 4px}
  #loading-title{height:26px;margin-bottom:4px;font-size:13px;line-height:16px}
  .loading-orb{width:34px;height:34px}
  #loading-value{font-size:22px}
  .loading-meter{margin-bottom:4px}
  #loading-progress{height:12px}
  #loading-detail{margin-top:4px;font-size:12px}
  .loading-steps{display:flex;margin-top:2px;font-size:12px;letter-spacing:0}
  .loading-steps li{flex:1;min-width:0;gap:4px;height:24px;white-space:nowrap}
  .loading-steps li::before{width:18px;height:18px}
  .loading-steps li.done::before{background-size:15px 14px}
  .loading-steps li[aria-current]::before{background-size:18px 18px}
  .loading-hint{display:none}
  #loading-retry{height:40px;margin-top:6px}
  .loading-pc{top:max(8px,env(safe-area-inset-top));font-size:12px;max-width:min(380px,46vw)}
  .loading-pc b{display:none}
  .loading-pc-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-height:340px){.loading-steps{display:none}}
@media (prefers-reduced-motion:reduce){
  .loading-art,.loading-embers::before,.loading-embers::after,.loading-card,.loading-orb::after,#asset-loading,#web-pc-tip,.loading-steps li[aria-current]::before{animation:none}
  .loading-embers{display:none}
  #loading progress:indeterminate,#asset-loading progress:indeterminate{animation:none;background-position:50% 0,0 0}
}