/* ============================================================
   WEALTH OF THE EAST — style.css
   Premium Eastern Style · Red & Gold · Refined
   ============================================================ */

:root {
  /* Eastern palette */
  --crimson:    #7A0A0A;
  --crimson-lt: #B91C1C;
  --crimson-dk: #3A0000;
  --gold:       #FFD700;
  --gold-lt:    #FFE566;
  --gold-dk:    #B87800;
  --gold-deep:  #8B5E00;
  --ivory:      #FFF8E8;
  --ivory-dim:  rgba(255,248,232,0.65);
  --ivory-faint:rgba(255,248,232,0.28);
  --jade:       #2A7A3A;
  --jade-lt:    #44AA55;

  /* Surfaces */
  --panel:      rgba(52,0,0,0.90);
  --panel-lt:   rgba(92,10,10,0.84);
  --separator:  rgba(255,215,0,0.2);

  /* Effects */
  --glow-gold:  0 0 16px rgba(255,215,0,0.6);
  --glow-red:   0 0 16px rgba(158,18,18,0.55);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.7);
  --shadow-xl:  0 16px 60px rgba(0,0,0,0.8);

  /* Typography */
  --font-title: Georgia, 'Times New Roman', serif;
  --font-body:  'Segoe UI', Arial, sans-serif;

  /* Geometry */
  --radius:     6px;
  --radius-lg:  8px;
  --radius-xl:  8px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  background:var(--crimson-dk);
  color:var(--ivory);
  font-family:var(--font-body);
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,215,0,0.018) 0 1px,transparent 1px 34px);
  pointer-events:none;z-index:0;
}

/* ── HEADER ─────────────────────────────────────────────────── */
header{
  display:flex;align-items:center;justify-content:space-between;
  height:56px;padding:0 24px;
  background:rgba(40,0,0,0.95);
  border-bottom:2px solid rgba(255,215,0,0.35);
  position:sticky;top:0;z-index:100;
  box-shadow:0 4px 24px rgba(0,0,0,0.6);
}
header::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-lt),var(--gold),var(--gold-lt),transparent);
}
.logo{
  font-family:var(--font-title);font-size:1.1rem;font-weight:700;
  letter-spacing:1px;color:var(--gold);
  text-shadow:var(--glow-gold);
  display:flex;align-items:center;gap:10px;
}
.logo-icon{font-size:1.3rem;filter:drop-shadow(0 0 6px rgba(255,215,0,0.7));}
nav{display:flex;align-items:center;gap:2px;}
nav a{
  font-family:var(--font-body);font-size:0.82rem;font-weight:600;
  color:var(--ivory-dim);text-decoration:none;
  padding:6px 12px;border-radius:var(--radius);transition:all 0.18s;
}
nav a:hover{color:var(--gold-lt);background:rgba(255,215,0,0.1);}
#lang-switcher{position:relative;margin-left:4px;}
#lang-btn{
  display:flex;align-items:center;gap:5px;
  font-size:0.82rem;font-weight:600;
  color:var(--ivory-dim);background:none;border:none;
  padding:6px 10px;border-radius:var(--radius);cursor:pointer;transition:all 0.18s;
}
#lang-btn:hover{color:var(--gold-lt);background:rgba(255,215,0,0.1);}
#lang-btn .arrow{font-size:10px;opacity:0.6;transition:transform 0.18s;}
#lang-btn.open .arrow{transform:rotate(180deg);}
#lang-dropdown{
  display:none;position:absolute;top:calc(100%+8px);right:0;
  background:var(--crimson-dk);
  border:1px solid rgba(255,215,0,0.28);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
  overflow:hidden;z-index:200;min-width:158px;
}
#lang-dropdown.open{display:block;}
.lang-option{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;font-size:0.85rem;font-weight:600;
  color:var(--ivory-dim);cursor:pointer;transition:background 0.12s;
}
.lang-option:not(:last-child){border-bottom:1px solid rgba(255,215,0,0.12);}
.lang-option:hover{background:rgba(255,215,0,0.1);color:var(--gold-lt);}
.lang-option.active{color:var(--gold);}
.lang-flag{font-size:17px;}

/* ── GAME SECTION ─────────────────────────────────────────────── */
#game-section{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding:18px 16px 56px;gap:12px;
}

/* ── HUD BAR ──────────────────────────────────────────────────── */
#hud{
  display:flex;align-items:stretch;
  width:100%;max-width:820px;
  background:var(--panel);
  border:1px solid var(--separator);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-md),0 0 20px rgba(255,215,0,0.08);
}
/* decorative corner ornaments */
#hud::before,#hud::after{
  content:'✦';
  display:flex;align-items:center;
  padding:0 12px;
  font-size:10px;color:rgba(255,215,0,0.35);
  flex-shrink:0;
}
.hud-cell{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;padding:10px 4px;
  border-right:1px solid var(--separator);
}
.hud-cell:last-child{border-right:none;}
.hud-label{
  font-family:var(--font-body);font-size:0.47rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--ivory-faint);
}
.hud-val{
  font-family:var(--font-title);font-size:1.1rem;font-weight:700;
  color:var(--gold);text-shadow:var(--glow-gold);letter-spacing:0.5px;
}
#combo-val{color:var(--gold-lt);font-size:0.95rem;}
#hud-controls{
  display:flex;align-items:center;gap:5px;
  padding:0 12px;border-left:1px solid var(--separator);flex-shrink:0;
}
.diff-btn{
  font-family:var(--font-body);font-size:0.7rem;font-weight:700;
  padding:5px 10px;border-radius:var(--radius);
  background:none;border:1px solid rgba(255,215,0,0.22);
  color:var(--ivory-faint);cursor:pointer;transition:all 0.18s;
  letter-spacing:0.3px;
}
.diff-btn.active,.diff-btn:hover{
  border-color:var(--gold);color:var(--gold);
  background:rgba(255,215,0,0.1);
}
#start-btn{
  font-family:var(--font-body);font-size:0.85rem;font-weight:700;
  padding:8px 16px;
  background:linear-gradient(135deg,var(--crimson-lt),#B91C1C);
  color:var(--gold);border:1.5px solid var(--gold-dk);
  border-radius:var(--radius);cursor:pointer;transition:all 0.15s;
  box-shadow:var(--shadow-sm),var(--glow-red);
  white-space:nowrap;letter-spacing:0.3px;
}
#start-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md),var(--glow-gold);}
#start-btn:active{transform:scale(0.97);}

/* ── LIVES ────────────────────────────────────────────────────── */
.life-icon{font-size:1.1rem;transition:opacity 0.3s;}
.life-icon.lost{opacity:0.2;filter:grayscale(1);}

/* ── CANVAS WRAP ──────────────────────────────────────────────── */
#canvas-wrap{
  position:relative;width:100%;max-width:820px;
  border-radius:var(--radius-xl);overflow:hidden;
  /* Decorative gold border with double line effect */
  border:3px solid var(--gold-dk);
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.15),
    var(--shadow-lg),
    inset 0 0 60px rgba(158,18,18,0.30);
  aspect-ratio:820/560;cursor:crosshair;
}
/* Inner gold frame line */
#canvas-wrap::before{
  content:'';position:absolute;inset:6px;
  border:1.5px solid rgba(255,215,0,0.25);
  border-radius:calc(var(--radius-xl) - 6px);
  pointer-events:none;z-index:5;
}
/* Corner ornaments */
#canvas-wrap::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle 20px at 16px 16px, rgba(255,215,0,0.15) 0%, transparent 70%),
    radial-gradient(circle 20px at calc(100% - 16px) 16px, rgba(255,215,0,0.15) 0%, transparent 70%),
    radial-gradient(circle 20px at 16px calc(100% - 16px), rgba(255,215,0,0.15) 0%, transparent 70%),
    radial-gradient(circle 20px at calc(100% - 16px) calc(100% - 16px), rgba(255,215,0,0.15) 0%, transparent 70%);
  pointer-events:none;z-index:4;
}
#game-canvas{display:block;width:100%;height:100%;background:var(--crimson-dk);}

/* Score popups on canvas */
#score-pop{
  position:absolute;left:50%;top:30%;
  transform:translateX(-50%);
  font-family:var(--font-title);font-size:1.1rem;font-weight:700;
  pointer-events:none;opacity:0;z-index:20;white-space:nowrap;
  text-shadow:var(--glow-gold);letter-spacing:1px;
}
#score-pop.show{animation:score-rise 1.1s ease-out forwards;}
@keyframes score-rise{
  0%{opacity:1;transform:translateX(-50%) scale(0.85);}
  20%{opacity:1;transform:translateX(-50%) scale(1.12);}
  100%{opacity:0;transform:translateX(-50%) translateY(-60px);}
}

/* Event banner */
#event-banner{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  font-family:var(--font-body);font-size:0.88rem;font-weight:700;
  padding:7px 20px;border-radius:var(--radius);
  background:rgba(40,0,0,0.9);
  border:1.5px solid var(--gold-dk);
  color:var(--gold-lt);
  box-shadow:var(--glow-gold);
  pointer-events:none;opacity:0;white-space:nowrap;z-index:12;
}
#event-banner.show{animation:banner-in 2.8s ease forwards;}
@keyframes banner-in{
  0%{opacity:0;transform:translateX(-50%) translateY(-8px);}
  12%{opacity:1;transform:translateX(-50%) translateY(0);}
  78%{opacity:1;}
  100%{opacity:0;}
}

/* ── OVERLAY ──────────────────────────────────────────────────── */
#overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:28px;
  background:rgba(20,0,0,0.88);
  backdrop-filter:blur(14px) saturate(0.9);
  -webkit-backdrop-filter:blur(14px);
  transition:opacity 0.3s;z-index:30;
  border-radius:calc(var(--radius-xl) - 3px);
}
#overlay.hidden{opacity:0;pointer-events:none;}

/* Decorative top border line in overlay */
.ol-deco{
  display:flex;align-items:center;gap:10px;
  width:100%;justify-content:center;
}
.ol-deco-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.ol-deco-line.r{background:linear-gradient(90deg,var(--gold),transparent);}
.ol-deco-char{font-size:1.1rem;color:var(--gold);opacity:0.8;}

.ol-icon{
  font-size:5rem;line-height:1;
  filter:drop-shadow(0 0 20px rgba(255,215,0,0.6));
  animation:float-icon 3s ease-in-out infinite;
}
@keyframes float-icon{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.ol-title{
  font-family:var(--font-title);font-size:1.6rem;font-weight:700;
  letter-spacing:2px;color:var(--gold);text-align:center;
  text-shadow:var(--glow-gold);
}
.ol-chinese{font-size:1.2rem;color:var(--gold-lt);letter-spacing:4px;opacity:0.8;}
.ol-body{
  font-size:0.9rem;font-weight:400;color:var(--ivory-dim);
  text-align:center;max-width:380px;line-height:1.7;
}
.ol-score-wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.ol-chip{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 16px;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.28);
  border-radius:var(--radius);min-width:80px;
}
.chip-l{font-size:0.52rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ivory-faint);}
.chip-v{font-family:var(--font-title);font-size:1.2rem;font-weight:700;color:var(--gold);}
.new-best-badge{
  font-family:var(--font-body);font-size:0.82rem;font-weight:700;
  letter-spacing:1px;padding:6px 18px;border-radius:var(--radius);
  background:rgba(255,215,0,0.12);border:1px solid rgba(255,215,0,0.4);
  color:var(--gold);
}
.ol-btn{
  font-family:var(--font-body);font-size:1rem;font-weight:700;
  letter-spacing:1px;padding:14px 44px;
  background:linear-gradient(135deg,var(--crimson-lt),#B91C1C);
  color:var(--gold);
  border:1.5px solid var(--gold-dk);
  border-radius:var(--radius-xl);
  cursor:pointer;transition:all 0.18s;
  box-shadow:var(--shadow-md),var(--glow-red);margin-top:4px;
}
.ol-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--glow-gold);}
.ol-btn:active{transform:scale(0.97);}

/* ── MOBILE TOUCH ─────────────────────────────────────────────── */
#touch-hint{
  font-family:var(--font-body);font-size:0.8rem;font-weight:600;
  color:var(--ivory-faint);text-align:center;letter-spacing:0.5px;
}

/* ── ABOUT / LEGAL ────────────────────────────────────────────── */
.page-hero{
  padding:52px 28px 44px;
  border-bottom:2px solid rgba(255,215,0,0.2);
  background:var(--panel);position:relative;
}
.page-hero::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-lt),var(--gold),var(--gold-lt),transparent);
}
.page-hero h1{
  font-family:var(--font-title);font-size:1.8rem;font-weight:700;
  letter-spacing:2px;color:var(--gold);margin-bottom:12px;
  text-shadow:var(--glow-gold);
}
.hero-icon{font-size:48px;margin-bottom:16px;}
.hero-chinese{font-size:1.4rem;color:var(--gold-lt);letter-spacing:6px;margin-bottom:8px;opacity:0.75;}
.page-hero p{font-size:1.05rem;color:var(--ivory-dim);max-width:600px;line-height:1.7;}
.content-wrap{max-width:760px;margin:0 auto;padding:44px 24px 80px;}
.section-title{
  font-family:var(--font-title);font-size:1rem;font-weight:700;
  letter-spacing:2px;color:var(--gold-lt);
  margin:40px 0 16px;display:flex;align-items:center;gap:14px;
}
.section-title:first-child{margin-top:0;}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,215,0,0.4),transparent);}
.card-list{display:flex;flex-direction:column;gap:1px;background:rgba(255,215,0,0.1);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:28px;}
.card-row{background:var(--panel);padding:16px 18px;display:flex;align-items:flex-start;gap:14px;border-bottom:1px solid rgba(255,215,0,0.08);}
.card-row:last-child{border-bottom:none;}
.card-row-icon{font-size:22px;flex-shrink:0;margin-top:1px;}
.card-row h4{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--gold-lt);margin-bottom:4px;}
.card-row p{font-size:0.93rem;color:var(--ivory-dim);line-height:1.65;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,215,0,0.1);border-radius:var(--radius-lg);overflow:hidden;}
.col-card{background:var(--panel);padding:18px;}
.col-card h3{font-family:var(--font-body);font-size:0.9rem;font-weight:700;color:var(--gold-lt);margin-bottom:10px;letter-spacing:0.5px;}
.col-card ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.col-card li{font-size:0.88rem;color:var(--ivory-dim);padding-left:16px;position:relative;line-height:1.55;}
.col-card li::before{content:'◆';position:absolute;left:0;font-size:8px;color:var(--gold-dk);top:4px;}
.highlight-box{background:rgba(255,215,0,0.07);border-left:3px solid var(--gold-dk);border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin:18px 0;font-size:0.93rem;color:var(--ivory-dim);}
.cta-btn{display:inline-block;font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:1px;padding:15px 44px;background:linear-gradient(135deg,var(--crimson-lt),#B91C1C);color:var(--gold);border:1.5px solid var(--gold-dk);border-radius:var(--radius-xl);text-decoration:none;box-shadow:var(--shadow-md),var(--glow-red);transition:opacity 0.15s;}
.cta-btn:hover{opacity:0.88;}
.legal-body{font-size:0.95rem;color:var(--ivory-dim);line-height:1.8;}
.legal-body h2{font-family:var(--font-title);font-size:0.85rem;color:var(--gold-lt);margin:28px 0 8px;letter-spacing:1px;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{margin-bottom:10px;}

/* Index editorial ledger */
.badge-hidden{display:none;}
.cta-wrap{text-align:center;margin-top:34px;}
.fortune-notes{
  position:relative;z-index:1;
  max-width:1080px;margin:0 auto 64px;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--separator);border-bottom:1px solid var(--separator);
}
.fortune-notes-head{grid-column:1/-1;padding:30px 0 24px;display:flex;align-items:end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--separator);}
.fortune-notes-head span,.legal-kicker,.contact-columns article>span{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--jade-lt);}
.fortune-notes-head h2{font-family:var(--font-title);font-size:1.55rem;color:var(--gold);text-align:right;}
.fortune-notes article,.fortune-notes aside{min-width:0;padding:28px 24px;border-right:1px solid var(--separator);}
.fortune-notes article:first-of-type{padding-left:0;}
.fortune-notes article:nth-of-type(3){border-right:0;padding-right:0;}
.fortune-notes aside{grid-column:1/-1;border-right:0;border-top:1px solid var(--separator);padding:24px 0;display:grid;grid-template-columns:120px 1fr repeat(3,auto);align-items:center;gap:18px;}
.note-number{font-size:.7rem;font-weight:800;color:var(--jade-lt);text-transform:uppercase;}
.fortune-notes h3{font-family:var(--font-title);font-size:1rem;color:var(--gold-lt);margin:10px 0;}
.fortune-notes p{font-size:.9rem;line-height:1.7;color:var(--ivory-dim);}
.fortune-notes a,.legal-shell a,.privacy-shell a,.contact-ledger a{color:var(--gold-lt);text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere;}

/* Structured inner pages */
.inner-page{display:flex;min-height:100vh;flex-direction:column;}
.inner-page main{position:relative;z-index:1;flex:1;width:100%;}
.legal-shell,.privacy-shell,.contact-ledger{max-width:1080px;margin:0 auto;padding:64px 24px 84px;}
.legal-intro,.privacy-title,.contact-heading{display:grid;grid-template-columns:minmax(180px,.45fr) minmax(0,1fr);gap:12px 48px;padding-bottom:34px;border-bottom:2px solid var(--gold-dk);}
.legal-kicker{grid-row:1/3;padding-top:7px;}
.legal-intro h1,.privacy-title h1,.contact-heading h1{font-family:var(--font-title);font-size:clamp(1.9rem,4vw,3rem);color:var(--gold);}
.legal-intro p,.privacy-title p,.contact-heading p{max-width:720px;color:var(--ivory-dim);line-height:1.75;}
.charter-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0;margin-top:18px;}
.charter-grid article{grid-column:span 6;padding:28px;border-bottom:1px solid var(--separator);}
.charter-grid article:nth-child(odd){padding-left:0;border-right:1px solid var(--separator);}
.charter-grid article:nth-child(even){padding-right:0;}
.charter-grid article>span{font-size:.7rem;text-transform:uppercase;color:var(--jade-lt);font-weight:700;}
.charter-grid h2,.data-route h2,.contact-columns h2{font-family:var(--font-title);font-size:1.05rem;color:var(--gold-lt);margin:8px 0 12px;}
.charter-grid p,.data-route p,.contact-columns p,.contact-caution p{font-size:.92rem;line-height:1.72;color:var(--ivory-dim);}
.data-route{counter-reset:route;}
.data-route article{display:grid;grid-template-columns:120px minmax(0,1fr);gap:30px;padding:30px 0;border-bottom:1px solid var(--separator);}
.route-mark{font-family:var(--font-title);font-size:1.45rem;color:var(--jade-lt);}
.contact-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;border-block:1px solid var(--separator);}
.contact-columns article{padding:28px;border-right:1px solid var(--separator);min-width:0;}
.contact-columns article:first-child{padding-left:0;}
.contact-columns article:last-child{padding-right:0;border-right:0;}
.contact-columns a{display:inline-block;margin-bottom:12px;font-weight:700;}
.contact-caution{margin-top:32px;padding:20px 24px;border-left:3px solid var(--jade-lt);background:rgba(42,122,58,.12);}
.contact-caution strong{display:block;color:var(--gold-lt);margin-bottom:5px;}
footer{position:relative;z-index:1;background:var(--crimson-dk);border-top:1px solid rgba(255,215,0,0.15);padding:18px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-label{font-size:0.82rem;color:var(--ivory-faint);}
.footer-links{display:flex;}
.footer-links a{font-size:0.82rem;color:var(--gold-dk);text-decoration:none;padding:4px 10px;transition:color 0.15s;}
.footer-links a:hover{color:var(--gold);}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:760px){
  .fortune-notes{grid-template-columns:1fr;margin-bottom:44px;padding:0 16px;}
  .fortune-notes-head{display:block;}.fortune-notes-head h2{text-align:left;margin-top:8px;font-size:1.25rem;}
  .fortune-notes article,.fortune-notes article:first-of-type,.fortune-notes article:nth-of-type(3){padding:22px 0;border-right:0;border-bottom:1px solid var(--separator);}
  .fortune-notes aside{grid-template-columns:1fr;gap:10px;padding:22px 0;}
  .legal-shell,.privacy-shell,.contact-ledger{padding:42px 16px 58px;}
  .legal-intro,.privacy-title,.contact-heading{grid-template-columns:1fr;gap:10px;}
  .legal-kicker{grid-row:auto;}.legal-intro h1,.privacy-title h1,.contact-heading h1{font-size:1.85rem;}
  .charter-grid{display:block;}.charter-grid article,.charter-grid article:nth-child(odd),.charter-grid article:nth-child(even){padding:24px 0;border-right:0;}
  .data-route article{grid-template-columns:54px minmax(0,1fr);gap:14px;}
  .contact-columns{grid-template-columns:1fr;}.contact-columns article,.contact-columns article:first-child,.contact-columns article:last-child{padding:24px 0;border-right:0;border-bottom:1px solid var(--separator);}
}
@media(max-width:640px){header{padding:0 14px;}.logo{font-size:0.88rem;}nav a{display:none;}nav a.always{display:block;}#game-section{padding:12px 8px 40px;gap:10px;}#hud::before,#hud::after{display:none;}#hud{flex-wrap:wrap;}.hud-cell{min-width:calc(33%);}#hud-controls{width:100%;justify-content:center;border-left:none;border-top:1px solid var(--separator);padding:8px;}.ol-title{font-size:1rem;}.two-col{grid-template-columns:1fr;}.content-wrap{padding:32px 14px 60px;}.page-hero{padding:36px 18px 32px;}.page-hero h1{font-size:1.4rem;}footer{padding:14px;flex-direction:column;text-align:center;}
  .diff-btn{font-size:.6rem;padding:5px 6px;}.diff-btn+#start-btn,#start-btn{font-size:.7rem;padding:7px 10px;}
  #overlay{gap:5px;padding:9px 14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  #overlay>.ol-deco{display:none;}.ol-icon{font-size:2rem;}.ol-chinese{font-size:.78rem;line-height:1.1;}.ol-body{font-size:.7rem;line-height:1.35;max-width:320px;}.ol-btn{font-size:.78rem;padding:8px 22px;margin-top:1px;}.ol-chip{padding:5px 9px;min-width:62px;}.chip-v{font-size:.85rem;}.chip-l{font-size:.44rem;}
}
@media(max-width:380px){.hud-val{font-size:0.9rem;}.hud-label{font-size:0.42rem;}#canvas-wrap::before{inset:4px;}}