/* Orbace Sudoku Web v4 — design system per PRD Brand Design System */
:root{
  --rice:#F5F0E8; --ivory:#EDE4D3; --ink:#2C2C2C; --mid:#5C5C5C; --light:#A0A0A0;
  --verm:#C41E3A; --dverm:#8B1A2B; --celadon:#B5C9BC; --celadon-d:#8AA894;
  --green:#5B8C5A; --amber:#C49A3A; --err:#C4533A;
  --serif:'Source Serif 4',Georgia,serif; --cjk:'Noto Serif SC',serif;
  --mono:'JetBrains Mono',monospace; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --line:#DDD2BF;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--rice);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);cursor:pointer}

/* ---------- Seals ---------- */
.seal{display:inline-flex;align-items:center;justify-content:center;background:var(--verm);color:#fff;
  font-family:var(--cjk);font-weight:700;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 1px 2px rgba(139,26,43,.35);
  user-select:none;flex-shrink:0}
.seal.lg{width:72px;height:72px;font-size:38px;border-radius:12px}
.seal.md{width:48px;height:48px;font-size:26px}
.seal.sm{width:30px;height:30px;font-size:16px;border-radius:6px}
.seal.outline{background:transparent;color:var(--mid);box-shadow:inset 0 0 0 2px var(--mid)}
.seal-label{font-size:11px;color:var(--mid);text-align:center;margin-top:4px;letter-spacing:.03em}

/* ---------- Top nav ---------- */
nav.top{position:sticky;top:0;z-index:50;background:var(--rice);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:10px 28px}
nav.top .brand{display:flex;align-items:center;gap:10px;margin-right:auto}
nav.top .brand h1{font-family:var(--serif);font-size:19px;font-weight:600}
nav.top .brand .tag{font-family:var(--cjk);font-size:12px;color:var(--mid);letter-spacing:.25em}
nav.top a.navlink{font-size:14px;color:var(--mid);padding:7px 12px;border-radius:6px;font-weight:500}
nav.top a.navlink:hover{background:var(--ivory);color:var(--ink)}
nav.top a.navlink.active{color:var(--verm);font-weight:600}
nav.top a.navlink .cjk{font-family:var(--cjk);margin-right:4px}

/* ---------- Pages ---------- */
.page{display:none;max-width:1060px;margin:0 auto;padding:28px 24px 80px}
.page.visible{display:block;animation:fadein .15s ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

h2.section{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--mid);
  display:flex;align-items:center;gap:10px;margin:30px 0 14px}
h2.section::after{content:"";flex:1;height:1px;background:var(--line)}
h2.section .cjk{font-family:var(--cjk);color:var(--ink)}

.card{background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:8px;
  padding:11px 22px;font-size:15px;font-weight:500;transition:background .15s}
.btn.primary{background:var(--verm);color:#fff}
.btn.primary:hover{background:var(--dverm)}
.btn.ghost{background:transparent;color:var(--verm);border:1.5px solid var(--verm)}
.btn.ghost:hover{background:rgba(196,30,58,.07)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.quiet{background:transparent;color:var(--mid);border:1px solid var(--line)}
.btn.quiet:hover{background:var(--ivory)}
.btn.sm{padding:7px 14px;font-size:13px}
.linkbtn{background:none;border:none;color:var(--verm);font-size:13px;font-weight:500;padding:4px 0}
.linkbtn:hover{text-decoration:underline}

/* ---------- Landing ---------- */
.hero{text-align:center;padding:64px 20px 48px}
.hero .seal.lg{margin:0 auto 22px}
.hero h2{font-family:var(--serif);font-size:42px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.hero .zh{font-family:var(--cjk);font-size:15px;color:var(--verm);letter-spacing:.4em;margin-bottom:18px}
.hero p{max-width:520px;margin:0 auto 30px;color:var(--mid);font-size:17px}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.hero .or{color:var(--light);font-size:13px;margin:10px 0}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.feature{background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:22px 18px;text-align:center}
.feature h3{font-family:var(--serif);font-size:16px;margin:12px 0 4px}
.feature p{font-size:13px;color:var(--mid)}
.lb-preview{margin-top:8px}
.lb-preview .row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.lb-preview .row:last-child{border-bottom:none}
footer{border-top:1px solid var(--line);margin-top:56px;padding:22px 28px;display:flex;gap:22px;flex-wrap:wrap;
  font-size:13px;color:var(--mid);justify-content:center}

/* ---------- Landing v2 ---------- */
.hero2{display:flex;gap:48px;align-items:center;padding:56px 4px 36px;flex-wrap:wrap}
.hero2 .copy{flex:1.1;min-width:300px}
.eyebrow{font-family:var(--cjk);color:var(--verm);font-size:14px;letter-spacing:.35em;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";width:56px;height:2px;background:var(--verm);opacity:.4}
.hero2 h2{font-family:var(--serif);font-size:clamp(34px,4.6vw,52px);font-weight:600;line-height:1.1;letter-spacing:-.015em;margin-bottom:16px}
.hero2 h2 em{font-style:normal;color:var(--verm);position:relative}
.hero2 h2 em::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:8px;background:rgba(196,30,58,.14);z-index:-1;border-radius:2px}
.hero2 .sub{color:var(--mid);font-size:17px;max-width:460px;margin-bottom:26px}
.hero2 .sub b{color:var(--ink)}
.hero2 .ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.storeline{font-size:13px;color:var(--light)}
.storeline button{background:none;border:none;color:var(--mid);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;padding:0 4px}
.hero-demo{flex:1;min-width:300px;display:flex;flex-direction:column;align-items:center;gap:12px}
.board.mini{width:min(340px,88vw);border-width:2px;box-shadow:0 12px 34px rgba(44,44,44,.10)}
.board.mini .cell{font-size:15px;cursor:default}
.demo-caption{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mid);background:var(--ivory);
  border:1px solid var(--line);border-radius:20px;padding:7px 16px}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--verm);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.demo-sub{font-size:12px;color:var(--light)}
.statstrip{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 8px}
.stat{flex:1;min-width:150px;text-align:center;padding:20px 12px}
.stat+.stat{border-left:1px solid var(--line)}
.stat .n{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink)}
.stat .n em{font-style:normal;color:var(--verm)}
.stat .l{font-size:12px;color:var(--mid);margin-top:2px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){.vs{grid-template-columns:1fr}}
.vs .col{border-radius:12px;padding:24px}
.vs .them{background:transparent;border:1px dashed var(--light);color:var(--mid)}
.vs .us{background:var(--ivory);border:1px solid var(--line);position:relative;overflow:hidden}
.vs .us::after{content:"数";position:absolute;right:-14px;bottom:-26px;font-family:var(--cjk);font-size:120px;color:rgba(196,30,58,.07);font-weight:700;pointer-events:none}
.vs h3{font-family:var(--serif);font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.vs ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:14px}
.vs .them li::before{content:"✕";color:var(--light);margin-right:9px;font-weight:600}
.vs .us li{color:var(--ink)}
.vs .us li .seal.sm{margin-right:8px;vertical-align:-7px}
.vs2{display:grid;grid-template-columns:104px 1fr 1.25fr;border-bottom:1px solid var(--line);font-size:14px}
.vs2:last-child{border-bottom:none}
.vs2>div{padding:15px 18px}
.vs2 .theme{display:flex;align-items:center;gap:8px;font-family:var(--cjk);font-weight:700;color:var(--verm);font-size:16px}
.vs2 .theme span{font-family:var(--sans);font-weight:500;color:var(--light);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.vs2 .them{color:var(--mid);border-left:1px solid var(--line)}
.vs2 .us{color:var(--ink);background:rgba(181,201,188,.16);border-left:2px solid var(--celadon-d)}
.vs2.head>div{font-family:var(--serif);font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;padding-bottom:10px}
.vs2.head .them{color:var(--light)}
@media (max-width:720px){
  .vs2{grid-template-columns:1fr 1fr}
  .vs2 .theme{grid-column:1/-1;padding-bottom:2px}
  .vs2 .them{border-left:none;padding-top:4px}
  .vs2 .us{padding-top:4px}
  .vs2 .them::before{content:"Elsewhere";display:block;font-size:10px;color:var(--light);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
  .vs2 .us::before{content:"At Orbace";display:block;font-size:10px;color:var(--celadon-d);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
  .vs2.head{display:none}
}
.ritual{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.ritual .step{background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:20px;position:relative}
.ritual .step .when{font-family:var(--mono);font-size:11px;color:var(--verm);letter-spacing:.08em;margin-bottom:8px}
.ritual .step h4{font-family:var(--serif);font-size:16px;margin:10px 0 4px}
.ritual .step p{font-size:13px;color:var(--mid)}
.countdown{font-family:var(--mono);color:var(--verm);font-weight:500}
.cta-band{margin-top:44px;background:var(--ink);border-radius:16px;padding:44px 28px;text-align:center;color:var(--rice)}
.cta-band .zh-v{font-family:var(--cjk);font-size:15px;letter-spacing:.5em;color:var(--celadon);margin-bottom:12px}
.cta-band h3{font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:8px}
.cta-band p{color:var(--light);font-size:14px;margin-bottom:22px}

/* ---------- Play ---------- */
.mode-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.mode-tab{border:1px solid var(--line);background:var(--ivory);border-radius:20px;padding:8px 16px;font-size:13px;color:var(--mid)}
.mode-tab.active{background:var(--verm);border-color:var(--verm);color:#fff;font-weight:500}
.mode-tab .cjk{font-family:var(--cjk);margin-right:5px}
.play-layout{display:flex;gap:26px;align-items:flex-start}
.board-wrap{flex-shrink:0}
.board{display:grid;grid-template-columns:repeat(9,1fr);width:min(540px,92vw);aspect-ratio:1;
  border:2.5px solid var(--ink);border-radius:4px;background:#FBF7EF;user-select:none}
.cell{border:1px solid #D8CDB8;display:flex;align-items:center;justify-content:center;position:relative;
  font-family:var(--mono);font-size:clamp(18px,3.2vw,26px);cursor:pointer;background:transparent}
.cell.bt{border-top:2px solid var(--ink)}.cell.bl{border-left:2px solid var(--ink)}
.cell.given{color:var(--mid);font-weight:500}
.cell.user{color:var(--ink)}
.cell.sel{background:var(--celadon)!important;box-shadow:inset 0 0 0 2px var(--celadon-d)}
.cell.peer{background:#EFE7D6}
.cell.same{background:#DCE6DF}
.cell.err{background:rgba(196,154,58,.28)!important;color:var(--err)}
.cell .notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  font-size:9px;color:var(--light);font-family:var(--mono);pointer-events:none}
.cell .notes span{display:flex;align-items:center;justify-content:center}
.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:14px;width:min(540px,92vw)}
.numpad button{background:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:12px 0;
  font-family:var(--mono);font-size:20px;color:var(--ink)}
.numpad button:hover{background:var(--celadon)}
.sidebar{flex:1;min-width:230px;display:flex;flex-direction:column;gap:14px}
.pinfo{display:flex;flex-direction:column;gap:6px;font-size:14px}
.pinfo .title{font-family:var(--cjk);font-size:18px;font-weight:700}
.pinfo .meta{color:var(--mid)}
.pinfo .timer{font-family:var(--mono);font-size:26px;margin-top:4px}
.toolrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tool{background:var(--rice);border:1px solid var(--line);border-radius:8px;padding:10px;font-size:13px;color:var(--ink);text-align:center}
.tool:hover{background:var(--celadon)}
.tool.on{background:var(--celadon);border-color:var(--celadon-d);font-weight:600}
.kbd-help{font-size:12px;color:var(--light);line-height:1.8}
.kbd-help b{font-family:var(--mono);background:var(--ivory);border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--mid);font-weight:500}
.stamp-overlay{position:fixed;inset:0;background:rgba(245,240,232,.88);display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;z-index:99;text-align:center}
.stamp-overlay.show{display:flex}
.stamp-overlay .bigseal{width:130px;height:130px;font-size:56px;border-radius:16px;animation:stamp .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.stamp-overlay h3{font-family:var(--serif);font-size:26px}
.stamp-overlay p{color:var(--mid)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;
  z-index:98;padding:20px;overflow-y:auto}
.toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:8px;
  padding:10px 20px;font-size:14px;z-index:100;display:none;animation:fadein .3s ease-out}
.toast.show{display:block}

/* ---------- Ranking ---------- */
.period-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.lb-table{width:100%;border-collapse:collapse;font-size:14px}
.lb-table td{padding:11px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.lb-table tr:last-child td{border-bottom:none}
.lb-table .rank{font-family:var(--mono);width:52px;color:var(--mid)}
.lb-table .name{font-weight:500}
.lb-table .rp{font-family:var(--serif);font-weight:600;text-align:right;width:80px}
.lb-table .time{font-family:var(--mono);color:var(--mid);text-align:right;width:70px}
.badge{display:inline-block;font-family:var(--cjk);font-size:11px;border-radius:4px;padding:1px 7px;margin-left:6px}
.badge.clean{background:rgba(91,140,90,.15);color:var(--green);border:1px solid rgba(91,140,90,.4)}
.badge.errb{background:rgba(196,154,58,.14);color:var(--amber);border:1px solid rgba(196,154,58,.4)}
tr.me td{background:rgba(196,154,58,.12);animation:pulse 1.4s ease-in-out 2}
@keyframes pulse{0%,100%{background:rgba(196,154,58,.12)}50%{background:rgba(196,154,58,.26)}}
.legend{font-size:12px;color:var(--light);margin-top:10px}
.ellipsis-row td{text-align:center;color:var(--light);font-size:12px;padding:4px}
.profile-card{display:flex;gap:16px;align-items:center}
.profile-card .stats{font-size:14px;color:var(--mid);line-height:1.9}
.profile-card .pname{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}

/* ---------- Su-Pu replay ---------- */
.supu-head{display:flex;gap:16px;align-items:flex-start}
.supu-head .info h3{font-family:var(--serif);font-size:20px;margin-bottom:4px}
.supu-head .info .meta{color:var(--mid);font-size:14px;line-height:1.7}
.replay-layout{display:flex;gap:24px;align-items:flex-start;margin-top:20px}
.replay-controls{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.replay-controls button{background:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:9px 15px;font-size:16px}
.replay-controls button:hover{background:var(--celadon)}
.replay-controls select{border:1px solid var(--line);background:var(--ivory);border-radius:8px;padding:8px;font-size:13px;font-family:var(--sans)}
.replay-controls .step-ind{font-family:var(--mono);font-size:13px;color:var(--mid);margin-left:auto}
.movelist{flex:1;min-width:210px;max-height:560px;overflow-y:auto;background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:8px}
.movelist .mv{font-family:var(--mono);font-size:13px;padding:6px 10px;border-radius:6px;color:var(--mid);cursor:pointer}
.movelist .mv:hover{background:var(--rice)}
.movelist .mv.done{color:var(--ink)}
.movelist .mv.cur{background:var(--celadon);color:var(--ink);font-weight:500}
#replayBoard .cell{cursor:default}
#replayBoard .cell.justplaced{background:var(--celadon);animation:fadein .3s}

/* ---------- Account ---------- */
.auth-card{max-width:420px;margin:0 auto;text-align:center}
.auth-card .btn{width:100%;margin-bottom:10px}
.auth-card .divider{display:flex;align-items:center;gap:12px;color:var(--light);font-size:12px;margin:14px 0}
.auth-card .divider::before,.auth-card .divider::after{content:"";flex:1;height:1px;background:var(--line)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:24px}
.tier{font-size:13px;color:var(--mid)}
.tier h4{font-family:var(--serif);font-size:15px;color:var(--ink);margin-bottom:6px}
.settings-group{margin-bottom:8px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.settings-row:last-child{border-bottom:none}
.settings-row .lbl b{display:block}
.settings-row .lbl span{font-size:12px;color:var(--light)}
.radio-group{display:flex;gap:4px}
.radio-group button{border:1px solid var(--line);background:var(--rice);padding:6px 12px;font-size:12px;color:var(--mid)}
.radio-group button:first-child{border-radius:6px 0 0 6px}
.radio-group button:last-child{border-radius:0 6px 6px 0}
.radio-group button.sel{background:var(--verm);border-color:var(--verm);color:#fff}
.danger{color:var(--err)}

/* ---------- Today dock ---------- */
.dock-head{font-family:var(--serif);font-size:14px;color:var(--mid);margin:6px 0 10px;display:flex;align-items:center;gap:8px}
.dock-head .cjk{font-family:var(--cjk);color:var(--verm);font-weight:700}
.dock{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-bottom:10px}
.dock .d{background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;gap:12px;align-items:center}
.dock .d.live{border-color:rgba(196,30,58,.45);box-shadow:0 0 0 1px rgba(196,30,58,.12)}
.dock .d .tx{flex:1;min-width:0}
.dock .d .tx b{font-size:14px;display:flex;gap:8px;align-items:center}
.dock .d .tx span{font-size:12px;color:var(--mid);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .live-pill{font-size:10px;background:var(--verm);color:#fff;border-radius:10px;padding:1px 8px;letter-spacing:.06em}
.dock .btn{white-space:nowrap;flex-shrink:0}

/* ---------- Mobile layout ---------- */
.tabbar{display:none}
@media (max-width:900px){
  .play-layout,.replay-layout{flex-direction:column}
  nav.top{padding:10px 14px;flex-wrap:wrap}
  nav.top .brand .tag{display:none}
  .hero h2{font-size:30px}
}
@media (max-width:720px){
  nav.top a.navlink{display:none}
  nav.top{padding:8px 14px}
  .page{padding:16px 14px 108px}
  .hero2{padding:22px 0 8px;gap:26px}
  .hero2 .sub{font-size:15px}
  .hero2 .ctas .btn{width:100%}
  .statstrip{border:none;gap:1px;background:var(--line);border-radius:10px;overflow:hidden}
  .stat{min-width:calc(50% - 1px);flex:1 1 40%;background:var(--rice);border:none!important;padding:16px 10px}
  .stat .n{font-size:21px}
  .dock{grid-template-columns:1fr}
  .cta-band{padding:32px 18px}
  .numpad{gap:4px}
  .numpad button{padding:13px 0;font-size:18px}
  .sidebar{width:100%;min-width:0}
  .movelist{max-height:220px;width:100%}
  .replay-controls button{padding:11px 14px}
  .supu-head{flex-wrap:wrap}
  footer{padding-bottom:96px}
  .stamp-overlay{padding:20px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--ivory);
    border-top:1px solid var(--line);justify-content:space-around;padding:7px 4px calc(7px + env(safe-area-inset-bottom))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--mid);padding:2px 6px;min-width:52px;font-weight:500}
  .tabbar a .ts{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    font-family:var(--cjk);font-weight:700;font-size:16px;color:var(--mid);box-shadow:inset 0 0 0 1.5px var(--light)}
  .tabbar a.active{color:var(--verm)}
  .tabbar a.active .ts{background:var(--verm);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
}