:root {
--ink: #2a1a14;
--ink-soft: #5b4636;
--paper: #f3e7cf;
--paper-2: #e8d6b3;
--cinnabar: #b8322a;
--cinnabar-deep: #8c1f19;
--gold: #d9a441;
--gold-soft: #f2d38a;
--jade: #2f6b5b;
--night: #1b1a2e;
--glass: rgba(27, 20, 30, 0.62);
--line: rgba(242, 211, 138, 0.35);
--zh: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "IBM Plex Sans", system-ui, sans-serif;
}
/* the world is a fixed dusk palette, so dark mode keeps the same tokens */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--paper); font-family: var(--sans); }
body { user-select: none; touch-action: none; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 3px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font: 600 11px var(--sans); color: var(--gold-soft); text-align: center; background: rgba(0,0,0,0.25); }
.seal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--cinnabar); color: var(--gold-soft); font: 44px/1 var(--zh); box-shadow: inset 0 0 0 3px var(--cinnabar-deep), inset 0 0 0 5px var(--gold); }
.seal.big { width: 84px; height: 84px; font-size: 60px; }
/* loading */
/* the loading screen: a red lacquer panel with faint wood grain, a big seal and a gold brush bar */
#loading { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity 0.7s;
background:
radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(8, 3, 2, 0.75) 100%),
repeating-linear-gradient(178deg, rgba(255, 210, 160, 0.035) 0 2px, transparent 2px 9px, rgba(0, 0, 0, 0.05) 9px 11px, transparent 11px 23px),
radial-gradient(circle at 50% 42%, #6b1d14 0%, #3a120c 48%, #1c0a07 100%); }
#loading .seal { width: 132px; height: 132px; border-radius: 16px; font-size: 92px; box-shadow: inset 0 0 0 4px var(--cinnabar-deep), inset 0 0 0 7px var(--gold), 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 60px rgba(214, 120, 60, 0.25); }
#loading .load-zh { margin-top: 6px; font: 26px/1 var(--zh); letter-spacing: 0.3em; color: var(--gold); }
#loading p { margin: 0; font: italic 600 30px var(--serif); letter-spacing: 0.04em; color: #f3e6c8; }
#loading .load-bar { position: relative; display: block; width: min(320px, 70vw); height: 6px; border-radius: 3px; background: rgba(214, 170, 80, 0.18); box-shadow: inset 0 0 0 1px rgba(214, 170, 80, 0.3); overflow: hidden; }
#loading .load-bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #b8862e, #f2d38a); border-radius: 3px; transition: width 0.25s ease-out; }
#loading b { font: 600 13px var(--sans); color: var(--gold); letter-spacing: 0.16em; }
#loading .load-rule { width: min(380px, 80vw); height: 9px; opacity: 0.7; background: linear-gradient(var(--gold), var(--gold)) 0 50% / 100% 1px no-repeat, radial-gradient(circle, var(--gold) 0 3.5px, transparent 4px) 50% 50% / 9px 9px no-repeat; }
#loading.gone { opacity: 0; pointer-events: none; }
/* camera picture-in-picture + hand skeleton */
#cam { position: fixed; right: 16px; bottom: 16px; width: 200px; aspect-ratio: 16/9; object-fit: cover; transform: scaleX(-1); border-radius: 12px; border: 2px solid var(--gold); z-index: 6; display: none; }
#hands { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; display: none; }
body.cam-on #cam, body.cam-on #hands { display: block; }
.cam-only { display: none !important; }
body.cam-on .cam-only { display: block !important; }
/* hud */
#hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 16px; pointer-events: none; flex-wrap: wrap; }
#hud > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--paper); font: 600 18px var(--serif); cursor: pointer; }
.brand .zh { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cinnabar); color: var(--gold-soft); font: 22px/1 var(--zh); }
#isle-nav { display: flex; gap: 6px; flex-wrap: wrap; }
#isle-nav button { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--paper); font: 500 13px var(--sans); cursor: pointer; }
#isle-nav button .zh { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--cinnabar); color: var(--gold-soft); font: 17px/1 var(--zh); }
#isle-nav button:hover, #isle-nav button.near { border-color: var(--gold); box-shadow: 0 0 18px rgba(217,164,65,0.35); }
#status { margin-left: auto; display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font: 600 11px var(--sans); letter-spacing: 0.08em; }
#status i { width: 8px; height: 8px; border-radius: 50%; background: #8a7a6a; }
#status.live i { background: #6fe39a; box-shadow: 0 0 10px #6fe39a; }
body.started #status { display: flex; }
.toggle { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--gold-soft); font: 600 12px var(--sans); letter-spacing: 0.06em; cursor: pointer; }
.toggle[aria-pressed="false"] { color: var(--paper-2); opacity: 0.7; }
body:not(.started) #status + .toggle { margin-left: auto; }
#help { position: fixed; left: 16px; bottom: 16px; z-index: 5; display: flex; flex-direction: column; gap: 5px; max-width: 260px; padding: 12px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 12px; color: var(--paper-2); }
#help b { font: 600 15px var(--serif); color: var(--gold-soft); text-transform: lowercase; }
#prompt { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--cinnabar); color: var(--gold-soft); border: 2px solid var(--gold); font: 600 18px var(--serif); box-shadow: 0 10px 40px rgba(0,0,0,0.35); cursor: pointer; animation: bob 1.6s ease-in-out infinite; }
#prompt[hidden] { display: none; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }
#flash { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9); z-index: 8; padding: 10px 20px; border-radius: 10px; background: var(--glass); font: 600 20px var(--serif); opacity: 0; pointer-events: none; transition: 0.25s; }
#flash.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* entry */
#entry { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(20, 14, 26, 0.55); backdrop-filter: blur(3px); transition: opacity 0.5s; }
#entry.gone { opacity: 0; pointer-events: none; }
#entry .card { width: min(480px, 100%); padding: 28px; border-radius: 16px; color: var(--ink); background: linear-gradient(180deg, var(--paper), var(--paper-2)); border: 3px solid var(--cinnabar); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--gold), 0 30px 80px rgba(0,0,0,0.5); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
#entry h1 { margin: 4px 0 0; font: 700 34px/1.05 var(--serif); }
#entry p { margin: 0; line-height: 1.55; color: var(--ink-soft); }
#entry p.small { font-size: 13px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.btn { min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--cinnabar); background: transparent; color: var(--cinnabar-deep); font: 600 15px var(--sans); cursor: pointer; }
.btn.primary { background: var(--cinnabar); color: var(--gold-soft); }
.btn:disabled { opacity: 0.6; }
/* content scroll */
#scroll { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: center; padding: 72px 16px 24px; background: rgba(15, 10, 20, 0.5); overflow-y: auto; user-select: text; touch-action: auto; animation: unroll 0.45s ease-out; }
#scroll[hidden] { display: none; }
@keyframes unroll { from { opacity: 0; transform: translateY(24px); } }
.paper { position: relative; width: min(860px, 100%); height: max-content; padding: 40px clamp(20px, 5vw, 56px) 56px; color: var(--ink); border-radius: 6px;
background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.35), transparent 60%), linear-gradient(180deg, var(--paper), var(--paper-2));
box-shadow: 0 0 0 2px var(--gold), 0 -14px 0 -4px var(--cinnabar-deep), 0 14px 0 -4px var(--cinnabar-deep), 0 40px 90px rgba(0,0,0,0.55); }
.back { min-height: 44px; padding: 8px 14px; border: 1px solid var(--ink-soft); background: transparent; border-radius: 8px; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; }
.back:hover { background: rgba(0,0,0,0.06); }
.isle-head { display: flex; gap: 18px; align-items: center; margin: 22px 0 8px; }
.isle-head h2 { margin: 0; font: 700 clamp(32px, 6vw, 48px)/1 var(--serif); }
.isle-head .kick { font: 600 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cinnabar); }
.lede { font: italic 500 21px/1.45 var(--serif); color: var(--ink-soft); margin: 10px 0 8px; }
.chapter { padding: 26px 0; border-top: 1px solid rgba(91,70,54,0.25); }
.chapter h3 { margin: 4px 0 2px; font: 700 28px/1.1 var(--serif); }
.chapter .when { font: 600 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinnabar); }
.chapter .org { font-size: 14px; color: var(--ink-soft); }
.chapter p { line-height: 1.6; }
.chapter .why { font: italic 500 19px/1.45 var(--serif); padding-left: 14px; border-left: 3px solid var(--gold); color: var(--ink-soft); }
.chapter ul { padding-left: 20px; line-height: 1.6; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.stat { padding: 10px 14px; border-radius: 10px; background: rgba(184,50,42,0.08); border: 1px solid rgba(184,50,42,0.25); }
.stat b { display: block; font: 700 26px/1 var(--serif); color: var(--cinnabar-deep); }
.stat span { font-size: 12px; color: var(--ink-soft); }
.photos { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x mandatory; }
.photos img { height: 200px; width: auto; border-radius: 6px; scroll-snap-align: start; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.2); flex: none; background: var(--paper-2); }
.era { margin: 18px 0; }
.era h4 { margin: 0 0 4px; font: 700 21px var(--serif); }
.reels { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px; }
.reel { flex: none; width: 120px; text-decoration: none; color: var(--ink); }
.reel img { width: 120px; aspect-ratio: 9/16; object-fit: cover; border-radius: 8px; display: block; }
/* carousel covers are 4:5: same height as a reel, wider, so the whole cover shows */
.reel.carousel, .reel.carousel img { width: 171px; }
.reel.carousel img { aspect-ratio: 4/5; }
.reel b { display: block; margin-top: 4px; font: 700 16px var(--serif); color: var(--cinnabar-deep); }
.reel span { font-size: 11px; color: var(--ink-soft); }
.portrait { width: 160px; height: 200px; object-fit: cover; object-position: 50% 25%; border-radius: 8px; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.25); }
.home-grid { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.home-grid > div { flex: 1 1 280px; }
/* contact links read like signatures stamped with a seal: no pill, a brush stroke on hover */
.links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 18px; }
.links a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; color: var(--ink); text-decoration: none; font: 600 22px var(--serif);
background: linear-gradient(var(--cinnabar), var(--cinnabar)) no-repeat 0 100% / 0 3px; transition: background-size 0.25s, color 0.2s; }
.links a:hover, .links a:focus-visible { color: var(--cinnabar-deep); background-size: 100% 3px; }
.stamp { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 5px; background: var(--cinnabar); color: var(--gold-soft); font: 22px/1 var(--zh); box-shadow: inset 0 0 0 2px var(--cinnabar-deep), inset 0 0 0 3px var(--gold); transform: rotate(-4deg); }
.links a:hover .stamp { transform: rotate(0deg); }
/* touch controls */
#touch { display: none; }
@media (pointer: coarse) {
#touch { display: block; }
#help { display: none; }
#stick { position: fixed; left: 24px; bottom: 28px; z-index: 5; width: 120px; height: 120px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); }
#stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px; border-radius: 50%; background: var(--cinnabar); border: 2px solid var(--gold); }
.vbtns { position: fixed; right: 20px; bottom: 28px; z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.vbtns button.fire { background: var(--cinnabar); color: var(--gold-soft); height: 64px; }
.vbtns button { width: 64px; height: 52px; border-radius: 12px; border: 1px solid var(--gold); background: var(--glass); color: var(--gold-soft); font: 600 13px var(--sans); }
}
@media (max-width: 640px) {
#isle-nav button .en { display: none; }
#isle-nav button { padding-right: 6px; }
.brand span:last-child { display: none; }
}
.credit { margin: 0; font-size: 11px; color: var(--ink-soft); }
#help .credit { color: var(--paper-2); opacity: 0.8; }
.credit a { color: inherit; }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { min-height: 30px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--paper-2); font: 500 11px var(--sans); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--cinnabar); color: var(--gold-soft); border-color: var(--gold); }
.voice-label { margin-top: 4px; color: var(--gold-soft); }
.toggle { display: inline-flex; align-items: center; gap: 6px; }
.tod { padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); margin-left: auto; }
.tod button { width: 34px; min-height: 30px; padding: 0; display: grid; place-items: center; color: var(--paper-2); }
body.started #status { margin-left: 0; }
#help summary::-webkit-details-marker { display: none; }
/* folded, the panel is a round button like the settings one */
#help { display: block; }
#help > span, #help > div { display: block; margin-top: 5px; }
#help > .seg { display: flex; }
body:not(.cam-on) #help > .cam-only { display: none !important; }
/* the aiming mark where fireballs go: an old square-holed coin with four ticks, small and gold */
#crosshair { position: fixed; left: 50%; top: 39%; transform: translate(-50%, -50%); z-index: 4; color: #f2d38a; pointer-events: none; filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)); transition: color 0.15s, transform 0.15s; }
#crosshair[hidden] { display: none; }
#crosshair .core { fill: var(--cinnabar); }
#crosshair.lock { color: #ff5a3a; transform: translate(-50%, -50%) scale(0.86) rotate(45deg); }
#crosshair.lock .core { fill: #fff2c0; }
/* battle HUD */
#battle, #hpbar { display: none; }
body.battle #battle { display: flex; }
body.battle.started #hpbar { display: block; }
#battle { position: fixed; right: 16px; top: 64px; z-index: 5; width: 240px; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); font-size: 12px; }
.battle-head { color: var(--paper-2); }
.battle-head b { color: var(--gold-soft); }
.battle-head .dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #8a7a6a; }
#battle.live .dot { background: #6fe39a; box-shadow: 0 0 8px #6fe39a; }
#score { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
#score li { display: grid; grid-template-columns: 12px 1fr 28px 28px; gap: 6px; align-items: center; }
#score li i { width: 10px; height: 10px; border-radius: 3px; }
#score li b { color: #6fe39a; text-align: right; }
#score li em { color: #ff8a6a; font-style: normal; text-align: right; }
#feed { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; color: var(--paper-2); }
#feed li.mine { color: var(--gold-soft); font-weight: 600; }
#hpbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5; width: min(280px, 60vw); height: 14px; border-radius: 999px; background: rgba(20,12,18,0.55); border: 1px solid var(--gold); overflow: hidden; }
#hpbar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: #6fe39a; transition: width 0.25s; }
#hpbar span { position: relative; display: block; text-align: center; font: 700 10px/14px var(--sans); color: #1a1218; }
#downed { position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, rgba(60,10,8,0.35), rgba(20,6,6,0.75)); color: var(--paper); pointer-events: none; }
#downed[hidden] { display: none; }
#downed p { margin: 6px 0; font: 600 20px var(--serif); }
#downed p:first-child { font-size: 40px; }
#downed b { color: var(--gold-soft); }
@media (max-width: 640px) { #battle { width: 190px; top: auto; bottom: 170px; } }
.seasons { margin-left: 0; }
/* control lists: keyboard by default, hand gestures once the camera is on */
body.cam-on #help .keys-only { display: none; }
#help .keys-only, #help .cam-only { display: block; }
body:not(.cam-on) #help .cam-only { display: none !important; }
#help .keys-only span, #help .cam-only span { display: block; margin-top: 5px; }
#help b.g { color: var(--gold-soft); font-weight: 600; }
/* hand dial: the camera feed stays hidden unless asked for; the skeleton overlay is drawn here */
body.cam-on #hands { display: none; }
body.cam-on #cam { display: none; }
body.cam-on.show-cam #cam { display: block; right: 16px; bottom: 216px; width: 180px; }
#handdial { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 6; width: 180px; flex-direction: column; align-items: center; gap: 6px; }
body.cam-on #handdial { display: flex; }
#handdial canvas { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(47,107,91,0.55), rgba(18,30,28,0.85)); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 6px rgba(140,31,25,0.9), 0 10px 30px rgba(0,0,0,0.4); }
#handdial .state { font: 600 12px var(--sans); color: var(--gold-soft); letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; background: var(--glass); }
#handdial.live .state { color: #6fe39a; }
#cam-toggle { min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--paper-2); font: 500 11px var(--sans); cursor: pointer; }
@media (pointer: coarse) { #handdial { bottom: 170px; width: 130px; } #handdial canvas { width: 130px; height: 130px; } }
/* ---------- the hanging scroll ---------- */
#scroll { animation: none; background: rgba(12, 8, 14, 0.55); padding: 56px 16px 32px; }
.hanging { width: min(900px, 100%); height: max-content; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5)); }
.unroll { width: 100%; display: flex; flex-direction: column; align-items: center; animation: unfurl 0.9s cubic-bezier(.2,.7,.2,1) both; transform-origin: top; }
@keyframes unfurl { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .unroll { animation: none; } }
/* lacquered wooden rollers with gilt end caps that stick out past the paper */
.roller { position: relative; width: calc(100% + 36px); height: 22px; border-radius: 11px; background: linear-gradient(180deg, #6e3a1f 0%, #4a2412 45%, #2c140a 100%); box-shadow: inset 0 2px 2px rgba(255,220,180,0.25), 0 4px 8px rgba(0,0,0,0.35); }
.roller::before, .roller::after { content: ""; position: absolute; top: -4px; width: 22px; height: 30px; border-radius: 6px; background: radial-gradient(circle at 35% 30%, #fbe3a2, #c8902c 55%, #7a5212); box-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.roller::before { left: -6px; } .roller::after { right: -6px; }
/* silk brocade mounting bands: deep red ground with a gold lattice and cloud dots */
.brocade { width: 100%; height: 34px; background:
radial-gradient(circle at 50% 50%, rgba(242,211,138,0.55) 2px, transparent 3px) 0 0 / 22px 17px,
repeating-linear-gradient(45deg, rgba(217,164,65,0.28) 0 2px, transparent 2px 11px),
repeating-linear-gradient(-45deg, rgba(217,164,65,0.28) 0 2px, transparent 2px 11px),
linear-gradient(180deg, #8c1f19, #6e1510);
box-shadow: inset 0 3px 0 #d9a441, inset 0 -3px 0 #d9a441; }
/* aged xuan paper: warm ground, fibre noise, darker foxed edges */
.hanging .paper { width: 100%; border-radius: 0; box-shadow: inset 0 0 80px rgba(120, 84, 40, 0.28), inset 0 0 14px rgba(90, 60, 30, 0.25);
background:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(ellipse at 50% 30%, #f7eed8 0%, #efe2c3 55%, #e3cfa6 100%); }
/* back to the sky: no border, an ink arrow with a brush underline on hover */
.hanging .back { border: 0; padding: 6px 2px; border-radius: 0; font: 600 16px var(--serif); color: var(--cinnabar-deep);
background: linear-gradient(var(--cinnabar), var(--cinnabar)) no-repeat 0 100% / 0 2px; transition: background-size 0.25s; }
.hanging .back:hover, .hanging .back:focus-visible { background-color: transparent; background-size: 100% 2px; }
/* ink-brush dividers between chapters instead of hairlines */
.hanging .chapter { border-top: 0; position: relative; padding-top: 34px; }
.hanging .chapter::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 10px; opacity: 0.6;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%; }
.hanging .chapter h3 { color: #1f130e; }
.hanging .photos img { border: 0; padding: 6px; background: #fbf6ea; box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px rgba(60,40,20,0.25); border-radius: 2px; }
.hanging .stat { background: rgba(184,50,42,0.06); border-color: rgba(140,31,25,0.2); }
/* a red seal pressed in the top corner of the paper */
.hanging .paper::after { content: "陈"; position: absolute; top: 28px; right: clamp(16px, 4vw, 40px); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 6px; font: 32px/1 var(--zh); color: #f6e7c8; background: #b8322a; opacity: 0.85; transform: rotate(5deg); box-shadow: inset 0 0 0 2px #8c1f19; mix-blend-mode: multiply; }
#scroll { overflow-x: hidden; }
@media (max-width: 640px) { .roller { width: calc(100% + 16px); } .roller::before { left: -2px; } .roller::after { right: -2px; } .hanging .paper::after { width: 36px; height: 36px; font-size: 24px; } }
@media (max-width: 900px) { body.mp #hpbar { bottom: auto; top: 112px; } }
/* ---------- the tea room (Home) ---------- */
#fade { position: fixed; inset: 0; z-index: 45; background: #0d0806; opacity: 0; pointer-events: none; transition: opacity 300ms ease; }
body.tea #hud, body.tea #help, body.tea #battle, body.tea #hpbar { opacity: 0; pointer-events: none; transition: opacity 0.4s; }
/* with the room behind it, the scroll's backdrop only lightly dims */
body.tea #scroll { background: rgba(14, 8, 4, 0.18); }
/* the logo doubles as the About me button; quick links beside it */
.brand .name { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.brand small { font: 500 10px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft); opacity: 0.8; }
.brand:hover, .brand:focus-visible, .brand.near { border-color: var(--gold); box-shadow: 0 0 18px rgba(217,164,65,0.35); }
.socials { display: flex; gap: 6px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); color: var(--paper-2); transition: color 0.2s, border-color 0.2s, transform 0.2s; }
.socials a:hover, .socials a:focus-visible { color: var(--gold-soft); border-color: var(--gold); transform: translateY(-1px); }
@media (max-width: 640px) { .socials a { width: 36px; height: 36px; } }
/* scroll type: a Times-style book serif throughout (EB Garamond), Cormorant for the titles,
brush calligraphy only on the seals */
.hanging .paper, .hanging .paper * { font-family: "EB Garamond", "Cormorant Garamond", "Times New Roman", serif; }
.hanging .paper p { font-size: 19px; line-height: 1.6; color: #2a1d16; }
.hanging .paper h2, .hanging .paper h3, .hanging .paper h4, .hanging .lede, .hanging .why { font-family: "Cormorant Garamond", "Times New Roman", serif; }
.hanging .chapter .when, .hanging .kick { font: 600 13px "EB Garamond", serif; letter-spacing: 0.14em; font-variant: small-caps; text-transform: lowercase; }
.hanging .chapter .org { font-style: italic; font-size: 16px; color: #5b4636; }
.hanging .stat span, .hanging .reel span { font-size: 14px; }
.hanging .seal, .hanging .stamp, .hanging .paper::after { font-family: var(--zh) !important; }
.hanging .back { font-family: "Cormorant Garamond", serif; }
/* richer paper: laid lines from the mould, mottled tea-coloured stains and denser fibres,
over the existing grain and foxed edges */
.hanging .paper { background:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.07) 0 1px, transparent 1px 7px),
repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.05) 0 1px, transparent 1px 64px),
radial-gradient(ellipse at 50% 30%, #f7eed8 0%, #efe2c3 55%, #ddc69a 100%); }
/* photos mounted the Chinese way: no white mat, a hairline of dark lacquer with a faint gold
inner line, and a soft shadow so they sit into the paper */
.hanging .photos img, .hanging .portrait, .hanging .reel img {
border: 0; padding: 0; border-radius: 2px; background: none;
box-shadow: inset 0 0 0 1px rgba(201, 160, 74, 0.55), 0 0 0 1px #3d1f10, 0 0 0 3px rgba(201, 160, 74, 0.28), 0 6px 14px rgba(60, 40, 20, 0.22);
}
.hanging .portrait { border-radius: 3px; }
/* scrolls read centred, like a hanging scroll: headings, text, stats and photos */
.hanging .paper { text-align: center; }
.hanging .isle-head { justify-content: center; text-align: left; }
.hanging .home-grid { justify-content: center; }
.hanging .home-grid > div { text-align: center; }
/* About me: the portrait centred under the title, then the sections */
.hanging .home-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 18px 0 4px; }
.hanging .home-hero .portrait { width: min(420px, 100%); height: auto; aspect-ratio: 3 / 2; }
.hanging .aka { margin-top: 4px; font: italic 500 20px "Cormorant Garamond", serif; color: #5b4636; }
.hanging .home-hero .photo-cap { width: min(420px, 100%); text-align: center; margin: -6px 0 0; font: italic 15px "EB Garamond", serif; color: #6b5444; }
.hanging .name-note { max-width: 640px; margin: 18px auto 6px; line-height: 2.1; }
.hanging button.fly.inline { padding: 0; font-weight: 600; color: var(--cinnabar-deep); background-size: 100% 1.5px; }
.hanging button.fly.inline:hover, .hanging button.fly.inline:focus-visible { color: var(--cinnabar); }
.hanging .eggs { max-width: 64ch; margin: 0 auto; padding-left: 1.1em; text-align: left; font-size: 18px; line-height: 1.6; color: #2a1d16; }
.hanging .eggs li { margin: 6px 0; }
.hanging .eggs b { color: var(--cinnabar-deep); }
/* 望子成龙 in the seals' brush script, deep red and a touch larger, with its pinyin above in the
text face; the selectors outrank the scroll's and start card's Garamond-everywhere rules */
ruby.py { white-space: nowrap; }
#entry .card ruby.py, .hanging .paper ruby.py { font-family: var(--zh); font-size: 1.3em; line-height: 1; color: var(--cinnabar-deep); letter-spacing: 0.06em; }
#entry .card ruby.py rt, .hanging .paper ruby.py rt { font: italic 500 12px "EB Garamond", serif; color: var(--cinnabar-deep); letter-spacing: 0.02em; }
.hanging kbd { color: #5b3a24; border-color: rgba(91, 58, 36, 0.45); background: rgba(255, 250, 235, 0.6); }
.hanging .stats, .hanging .links, .hanging .reels { justify-content: center; }
.hanging .paper::after { left: auto; }
.hanging .back { display: inline-block; }
/* four photos to a milestone, in an even row (two to a row on a phone) */
/* four to a row at a fixed width, so a section with fewer photos sits centred rather than to one side */
.hanging .photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; overflow: visible; padding: 8px 2px 12px; }
.hanging .photos img { width: calc((100% - 36px) / 4); height: 190px; object-fit: cover; }
.hanging .reel-play { display: block; width: min(560px, 100%); margin: 10px auto 14px; padding: 6px; background: #fbf6ea; box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 14px rgba(60,40,20,0.25); border-radius: 2px; }
.hanging .reel-play video { display: block; width: 100%; aspect-ratio: 640 / 454; object-fit: cover; background: #1a1410; }
/* a wide group shot takes two slots so nobody gets cropped off the sides */
.hanging .photos img.wide { width: calc((100% - 12px) / 2); }
.hanging .photos img.full { width: calc((100% - 24px) / 3); max-width: 230px; height: auto; object-fit: contain; }
@media (max-width: 640px) { .hanging .photos img { width: calc((100% - 12px) / 2); height: 150px; } .hanging .photos img.wide { width: 100%; } }
/* About me: island titles are buttons that fly you there */
.hanging button.fly { border: 0; padding: 0 2px; background: linear-gradient(var(--cinnabar), var(--cinnabar)) no-repeat 50% 100% / 0 2px; color: inherit; font: inherit; cursor: pointer; transition: background-size 0.25s, color 0.2s; }
.hanging button.fly span { color: var(--cinnabar); font-size: 0.8em; }
.hanging button.fly:hover, .hanging button.fly:focus-visible { color: var(--cinnabar-deep); background-size: 100% 2px; }
.hanging .why { border-left: 0; padding-left: 0; }
/* ---------- the start card as a hanging scroll: centred, rice paper, lacquer seal buttons ---------- */
#entry .entry-scroll { width: min(500px, 100%); display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5)); animation: unfurl 0.9s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { #entry .entry-scroll { animation: none; } }
#entry .card { width: 100%; border: 0; border-radius: 0; box-shadow: inset 0 0 70px rgba(120, 84, 40, 0.3), inset 0 0 12px rgba(90, 60, 30, 0.25);
align-items: center; text-align: center; gap: 12px; padding: 30px clamp(20px, 6vw, 40px) 34px;
background:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.06) 0 1px, transparent 1px 7px),
radial-gradient(ellipse at 50% 30%, #f7eed8 0%, #efe2c3 60%, #ddc69a 100%); }
#entry .card, #entry .card * { font-family: "EB Garamond", "Cormorant Garamond", "Times New Roman", serif; }
#entry .seal { font-family: var(--zh) !important; }
#entry .kick { font: 600 13px "EB Garamond", serif; letter-spacing: 0.3em; color: var(--cinnabar); }
#entry .kick { font-family: var(--zh), "EB Garamond", serif !important; font-size: 17px; letter-spacing: 0.25em; }
#entry h1 { font-family: "Cormorant Garamond", serif !important; font-size: 38px; margin: 0; }
#entry p { font-size: 18px; line-height: 1.55; color: #3a2a20; max-width: 40ch; }
#entry p.small { font-size: 15px; color: #5b4636; font-style: italic; }
#entry .row { justify-content: center; }
/* buttons: red lacquer with a gold inner line, and a quieter ink outline */
#entry .btn { min-height: 46px; padding: 10px 22px; border-radius: 6px; font: 600 17px "Cormorant Garamond", serif !important; letter-spacing: 0.03em; }
#entry .btn.primary { border: 0; background: linear-gradient(180deg, #c23a2e, #8c1f19); color: #f6dfa8; box-shadow: inset 0 0 0 2px #8c1f19, inset 0 0 0 4px rgba(217, 164, 65, 0.85), 0 3px 8px rgba(90, 20, 10, 0.3); }
#entry .btn:not(.primary) { border: 1.5px solid #8c1f19; background: rgba(255, 250, 238, 0.35); color: #8c1f19; }
#entry .btn:hover { filter: brightness(1.06); }
#entry { overflow-y: auto; place-items: safe center; }
#entry .entry-scroll { margin: auto; }
/* the single call to action on the start scroll */
#entry .btn.cta { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 260px; padding: 14px 34px 12px; margin: 6px 0 2px; border-radius: 8px; }
#entry .btn.cta .zh { font: 30px/1 var(--zh) !important; letter-spacing: 0.2em; color: #fbe6b0; text-shadow: 0 1px 0 #6e1510; }
#entry .btn.cta span:not(.zh) { font: 700 22px "Cormorant Garamond", serif !important; letter-spacing: 0.04em; }
#entry .btn.cta small { font: italic 14px "EB Garamond", serif !important; opacity: 0.85; }
#entry .btn.cta { transition: transform 0.2s, box-shadow 0.2s; }
#entry .btn.cta:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #8c1f19, inset 0 0 0 4px rgba(217, 164, 65, 0.95), 0 10px 22px rgba(140, 31, 25, 0.35); }
#entry p.small b { font-style: normal; color: #8c1f19; }
/* Content: the account tagged beside each era's name */
.hanging .era h4 .handle, .hanging .chapter h3 .handle { margin-left: 8px; font: italic 500 16px "EB Garamond", serif; color: var(--cinnabar); text-decoration: none; border-bottom: 1px solid rgba(184, 50, 42, 0.35); }
.hanging .era h4 .handle:hover, .hanging .chapter h3 .handle:hover { color: var(--cinnabar-deep); border-bottom-color: var(--cinnabar-deep); }
.hanging .era .when { margin-top: 2px; }
.hanging .reel b { text-align: center; }
/* ---------- top bar: logo + links | island plaques | settings ---------- */
#hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.hud-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-self: start; }
.hud-right { justify-self: end; position: relative; }
#isle-nav { justify-self: center; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* the islands: carved lacquer plaques with cut corners, nothing like the round settings */
#isle-nav button.plaque { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 92px; min-height: 0; padding: 9px 12px 8px; border: 0; border-radius: 0;
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
background: linear-gradient(180deg, #7a1e17 0%, #5a1410 100%); color: #f6dfa8; cursor: pointer;
box-shadow: inset 0 0 0 2px #3d0d0a, inset 0 0 0 4px rgba(217, 164, 65, 0.75), inset 0 18px 24px rgba(255, 200, 140, 0.08);
transition: transform 0.18s, filter 0.18s; }
#isle-nav button.plaque .zh { width: auto; height: auto; background: none; border-radius: 0; font: 30px/1.05 var(--zh); color: #fbe3a2; text-shadow: 0 2px 0 #3d0d0a; }
#isle-nav button.plaque .en { font: 700 16px "Cormorant Garamond", serif; letter-spacing: 0.03em; color: #f6e7c8; }
#isle-nav button.plaque .arrow { position: absolute; top: 6px; right: 9px; color: #f2c46a; transition: transform 0.2s linear; display: grid; }
#isle-nav button.plaque:hover, #isle-nav button.plaque:focus-visible { transform: translateY(-2px); filter: brightness(1.12); }
#isle-nav button.plaque.near { box-shadow: inset 0 0 0 2px #3d0d0a, inset 0 0 0 4px #f2d38a, 0 0 22px rgba(242, 211, 138, 0.6); filter: brightness(1.15); }
/* settings: one small round button; its panel drops down with every toggle */
#settings-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--paper-2); cursor: pointer; }
#settings-btn[aria-expanded="true"], #settings-btn:hover { color: var(--gold-soft); border-color: var(--gold); }
#settings-panel { position: absolute; right: 0; top: 50px; z-index: 20; width: 260px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border-radius: 14px; background: rgba(22, 14, 22, 0.88); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
#settings-panel[hidden] { display: none; }
#settings-panel .tod, #settings-panel .seasons { margin: 0; align-self: stretch; justify-content: space-between; }
#settings-panel .toggle, #settings-panel #status { width: 100%; justify-content: flex-start; margin: 0; }
body.started #settings-panel #status { display: flex; }
@media (max-width: 1100px) {
#hud { grid-template-columns: 1fr auto; }
#isle-nav { grid-column: 1 / -1; grid-row: 2; }
#isle-nav button.plaque { min-width: 0; padding: 7px 10px 6px; }
}
@media (max-width: 640px) {
#isle-nav { gap: 6px; }
#isle-nav button.plaque .zh { font-size: 22px; }
#isle-nav button.plaque .en { font-size: 13px; }
#isle-nav button.plaque .arrow { top: 3px; right: 5px; }
}
@media (max-width: 640px) { #isle-nav button.plaque .en { display: block; } }
/* ---------- phones and touch screens ---------- */
@media (pointer: coarse), (max-width: 760px) {
/* touch has its own stick and buttons, so the keyboard list stays off */
#help { display: none !important; }
}
@media (max-width: 640px) {
#hud { padding: 10px 10px; gap: 8px; }
/* all five islands on one row */
#isle-nav { gap: 4px; flex-wrap: nowrap; }
#isle-nav button.plaque { flex: 1 1 0; min-width: 0; padding: 6px 2px 5px; }
#isle-nav button.plaque .zh { font-size: 20px; }
#isle-nav button.plaque .en { font-size: 10.5px; white-space: nowrap; }
#isle-nav button.plaque .arrow { top: 2px; right: 3px; transform-origin: center; }
#isle-nav button.plaque .arrow svg { width: 9px; height: 9px; }
/* battle panel tucked under the top bar on the right, health bar between the touch controls */
#battle { top: 128px; bottom: auto; right: 8px; width: 170px; padding: 8px 10px; font-size: 11px; }
body.mp #hpbar, #hpbar { top: auto; bottom: 46px; width: 120px; }
#settings-panel { width: min(260px, calc(100vw - 20px)); }
}
@media (max-width: 640px) { #isle-nav button.plaque .en { font-size: 9.5px; letter-spacing: 0; } #isle-nav button.plaque { padding: 6px 1px 5px; } }
@media (max-width: 380px) { #isle-nav button.plaque .en { font-size: 8.5px; } }
@media (max-width: 1100px) { #isle-nav { justify-self: stretch; width: 100%; } }
@media (max-width: 640px) { #isle-nav button.plaque { flex: 1 1 0; } #isle-nav button.plaque .en { font-size: 10px; } }
/* one-time ghost hints on touch screens */
#ghost { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#ghost[hidden] { display: none; }
#ghost .finger { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 246, 220, 0.85) 0%, rgba(255, 230, 170, 0.45) 45%, rgba(255, 220, 150, 0) 72%);
box-shadow: 0 0 0 2px rgba(242, 211, 138, 0.55); transition: left 0.6s ease, top 0.6s ease; }
#ghost .caption { position: absolute; transform: translateX(-50%); padding: 7px 14px; border-radius: 999px; background: rgba(22, 14, 22, 0.8); border: 1px solid var(--gold); color: var(--gold-soft); font: italic 600 15px "EB Garamond", serif; white-space: nowrap; transition: left 0.6s ease, top 0.6s ease; }
#ghost.drag .finger { animation: ghost-drag 1.8s ease-in-out infinite; }
#ghost.tap .finger { animation: ghost-tap 1.1s ease-in-out infinite; }
@keyframes ghost-drag { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 55% { transform: translate(14px, -30px); } 80% { transform: translate(-10px, -24px); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ghost-tap { 0%, 100% { transform: scale(1); opacity: 0.9; } 40% { transform: scale(0.72); opacity: 1; } 60% { transform: scale(1.15); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { #ghost .finger { animation: none !important; } }
/* quick links sit with the settings button at the top right */
.hud-right { display: flex; align-items: center; gap: 6px; }
.hud-right .socials a { width: 38px; height: 38px; }
.socials button.resume { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--glass); border: 1px solid var(--line); color: var(--paper-2); font: 600 14px var(--serif); cursor: pointer; }
.socials button.resume:hover, .socials button.resume:focus-visible { color: var(--gold-soft); border-color: var(--gold); }
@media (max-width: 1100px) { #hud { grid-template-columns: 1fr auto; } .hud-left { display: none; } #isle-nav { grid-column: 1 / -1; } .hud-right { grid-column: 1 / -1; grid-row: 1; justify-self: end; } }
/* dragon skin picker in settings */
.skins-label { font: 600 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-2); margin-top: 2px; }
#skins { display: flex; gap: 5px; justify-content: space-between; }
#skins button { padding: 0; width: 34px; height: 34px; min-height: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
#skins button span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; color: #fff6e0; font: 17px/1 var(--zh); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
#skins button span.all { background: conic-gradient(#2f8a52 0 25%, #c0221b 0 50%, #d8d4c8 0 75%, #1f4e8c 0); font-size: 11px; border-color: var(--line); }
#skins button[aria-pressed="true"] span { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(242, 211, 138, 0.6); }
/* a narrower text measure on the scrolls (photos keep the full width), and no lone word left
on a paragraph's last line */
.hanging .paper p, .hanging .paper ul, .hanging .lede, .hanging .why { max-width: 64ch; margin-left: auto; margin-right: auto; text-wrap: pretty; }
.hanging .paper h2, .hanging .paper h3, .hanging .paper h4 { text-wrap: balance; }
/* the controls toggle: one gold-ringed pill pinned to the bottom-left corner. The panel grows
upward from behind it, so opening and closing happen in exactly the same spot. */
#help { padding: 12px 14px 58px; }
#help summary { position: absolute; left: 8px; bottom: 8px; width: 118px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--gold); background: rgba(40, 18, 22, 0.88); box-shadow: 0 4px 14px rgba(0,0,0,0.35); font: 600 15px var(--serif); color: var(--gold-soft); cursor: pointer; list-style: none; text-transform: lowercase; }
#help summary:hover { background: rgba(120, 30, 26, 0.9); color: #fff3d6; }
#help summary i { font-style: normal; font-size: 20px; line-height: 1; }
#help[open] summary .kb, #help[open] summary .closed-label, #help:not([open]) summary i, #help:not([open]) summary .open-label { display: none; }
#help:not([open]) { width: 134px; height: 54px; padding: 0; background: none; border-color: transparent; }
/* in first person the crosshair sits dead centre, where the dragon is looking */
body.fp #crosshair { top: 50%; }
/* the who's-flying board: hidden until Tab is held (or the online chip is tapped), centred like a
game scoreboard so it never sits under the settings panel; the kill feed stays on its own */
#battle, body.battle #battle { display: none; }
body.mp.board #battle { display: flex; left: 50%; right: auto; top: 150px; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); bottom: auto; z-index: 21; background: rgba(22, 14, 22, 0.9); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
#feed { position: fixed; right: 16px; top: 64px; z-index: 5; width: 240px; font-size: 12px; pointer-events: none; text-align: right; }
#room-chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--paper-2); font: 600 12px var(--sans); cursor: pointer; }
#room-chip[hidden] { display: none; }
#room-chip i { width: 8px; height: 8px; border-radius: 50%; background: #8a7a6a; }
#room-chip.live i { background: #6fe39a; box-shadow: 0 0 8px #6fe39a; }
#room-chip b { color: var(--gold-soft); }
#room-chip:hover, body.board #room-chip { border-color: var(--gold); color: var(--gold-soft); }
@media (max-width: 640px) { #room-chip span { display: none; } #room-chip { padding: 0 10px; height: 36px; } }
/* the who's-flying board, as a small hanging scroll of dark lacquer: brocade bands top and
bottom, a cinnabar 群龍 ("the dragons") seal, names in the serif, kills in gold, falls in red */
body.mp.board #battle { left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px)); padding: 30px 22px 22px; gap: 10px; border-radius: 4px; background: rgba(26, 12, 16, 0.55); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); border: 1px solid rgba(214, 170, 80, 0.75); box-shadow: 0 0 0 4px rgba(26, 12, 16, 0.35), 0 18px 50px rgba(0, 0, 0, 0.45); font-family: "EB Garamond", "Cormorant Garamond", serif; color: #f3e6c8; }
body.mp.board #battle::before, body.mp.board #battle::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(45deg, rgba(214,170,80,0.85) 0 3px, rgba(140,31,25,0.9) 3px 7px); }
body.mp.board #battle::before { top: 0; }
body.mp.board #battle::after { bottom: 0; }
.board-seal { position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-3deg); padding: 4px 10px; border-radius: 4px; background: #b8322a; color: #f6e7c8; font: 22px/1 var(--zh); letter-spacing: 0.08em; box-shadow: inset 0 0 0 2px #8c1f19, 0 4px 12px rgba(0,0,0,0.35); }
body.mp.board .battle-head { text-align: center; font: italic 500 15px "EB Garamond", serif; color: #e8d6b0; }
body.mp.board .battle-head b { font-style: normal; color: var(--gold-soft); }
.board-cols { display: grid; grid-template-columns: 18px 1fr 40px 40px; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(214, 170, 80, 0.45); font: 600 11px "EB Garamond", serif; letter-spacing: 0.14em; text-transform: lowercase; color: rgba(243, 230, 200, 0.7); }
.board-cols span:nth-child(n + 3) { text-align: center; font: 15px var(--zh); letter-spacing: 0; color: var(--gold-soft); }
body.mp.board #score { gap: 2px; }
body.mp.board #score li { grid-template-columns: 18px 1fr 40px 40px; gap: 8px; padding: 6px 4px; border-bottom: 1px dotted rgba(214, 170, 80, 0.3); font: 600 17px "Cormorant Garamond", "EB Garamond", serif; }
body.mp.board #score li:last-child { border-bottom: 0; }
body.mp.board #score li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mp.board #score li i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--gold-soft); box-shadow: inset 0 -2px 3px rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.35); }
body.mp.board #score li b { color: var(--gold-soft); text-align: center; }
body.mp.board #score li em { color: #ff9a7a; text-align: center; }
body.mp.board #score li.me { background: rgba(214, 170, 80, 0.12); border-radius: 3px; }
/* the name field on the start card: an obvious box to type into, close under its prompt */
/* the music credit at the foot of the settings panel */
.settings-credit { margin: 4px 0 0; text-align: center; font: 11px/1.5 "EB Garamond", serif; color: rgba(243, 230, 200, 0.5); }
.settings-credit a { color: inherit; }
/* Tab: the plaques light up (the glow sits on the row, since each plaque is clipped to its
cut-corner shape) and each shows its number key inside, in the top-right corner */
body.tabbed #isle-nav { filter: drop-shadow(0 0 6px rgba(255, 210, 122, 0.9)) drop-shadow(0 0 16px rgba(255, 190, 90, 0.5)); }
body.tabbed #isle-nav button.plaque::after { content: attr(data-key); position: absolute; right: 8px; top: 6px; font: 700 12px var(--sans); color: #1e0c0a; background: var(--gold-soft); border-radius: 3px; padding: 0 4px; line-height: 15px; }
/* the start card's second, quieter option, and the quick view's breaks between islands */
.card .read-all { display: block; margin: 12px auto 0; padding: 6px 10px; background: none; border: 0; color: inherit; opacity: 0.75; font: italic 16px "EB Garamond", serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.card .read-all:hover, .card .read-all:focus-visible { opacity: 1; }
.hanging .all-break { margin: 56px auto 40px; width: 60%; border: 0; border-top: 2px solid rgba(90, 50, 20, 0.35); }
.hanging .next-wrap { display: flex; justify-content: center; margin: 40px 0 8px; }
.hanging .next-isle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px; border-radius: 999px; border: 1.5px solid #b8322a; background: #fbf6ea; color: #2a1d16; font: 600 18px "EB Garamond", serif; cursor: pointer; box-shadow: 0 4px 12px rgba(60, 40, 20, 0.18); }
.hanging .next-isle .zh { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #b8322a; color: #f2d38a; font: 20px/1 "Ma Shan Zheng", KaiTi, serif; }
.hanging .next-isle:hover, .hanging .next-isle:focus-visible { background: #fff; transform: translateY(-1px); }
.hanging .chapter p.repo { margin: -4px auto 14px; text-align: center; }
.hanging .chapter p.repo a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(42, 29, 22, 0.35); color: #2a1d16; font: 500 15px "IBM Plex Mono", Menlo, monospace; text-decoration: none; }
.hanging .chapter p.repo a:hover, .hanging .chapter p.repo a:focus-visible { border-color: #b8322a; color: #b8322a; }