/* Appearance layer. The original eye palette and game geometry remain intact.
   uiTheme is separate from the vocabulary `theme` filter. */
:root {
  color-scheme: light;
  --on-primary:#FFFFFF; --focus:#9EBDAD;
  --canvas-bg:#F7F9F3; --snake-bg:#F1F5EA; --canvas-alt:#F0F4E9;
  --canvas-grid:#DBE3D3; --snake-grid:#E2E9DC; --canvas-floor:#E6EDE0;
  --canvas-muted:#70816A; --canvas-line:#819A74; --canvas-label:#52694A;
  --canvas-card:#FFFEF9; --canvas-card-border:#BCCBB1; --canvas-card-shadow:#DEE6D7;
  --canvas-text:#27332F; --canvas-ink:#326B5A; --canvas-pointer:#527648;
  --canvas-basket:#C9DABD; --canvas-weave:#91AD7D; --canvas-rim:#E1E9D7;
  --snake-body:#ADC4A1; --snake-tail:#C5D8BB;
}
:root[data-appearance="ocean"] {
  --bg:#F3F7FC; --paper:#FFFFFF; --text:#20334C; --muted:#56677E;
  --primary:#2861CB; --deep:#1D499D; --line:#DDE6F2; --soft:#E9F0FC; --light:#EFF5FF;
  --orange:#9C632A; --orange-bg:#FFF3E0; --red:#AD414A; --red-bg:#FFEBEE;
  --blue:#396B8E; --blue-bg:#EAF5FC; --focus:#709DE7;
  --side-bg:#FCFDFF; --hero-bg:linear-gradient(118deg,#E1F0FC 0%,#EAF2FF 54%,#DCE7FC 100%);
  --hero-line:#D6E5F8; --art-bg:#FAFDFF; --art-line:#BCCFED; --art-orbit:#ADCAE8;
  --canvas-bg:#F5F9FF; --snake-bg:#F0F6FF; --canvas-alt:#EAF2FF; --canvas-grid:#D8E4F5; --snake-grid:#D8E4F5;
  --canvas-floor:#E0EBFB; --canvas-muted:#5A749B; --canvas-line:#8AA9D5; --canvas-label:#526C95;
  --canvas-card:#FFFFFF; --canvas-card-border:#B3C9E7; --canvas-card-shadow:#D7E2F3;
  --canvas-text:#20334C; --canvas-ink:#2861CB; --canvas-pointer:#2861CB; --canvas-basket:#C9DAF6;
  --canvas-weave:#7C9ECF; --canvas-rim:#E0EAFA; --snake-body:#A0BCE4; --snake-tail:#C5D8F2;
  --garden:#EEF4F5; --garden-glow:#D8E9E5;
}
:root[data-appearance="cream"] {
  --bg:#FAF5EC; --paper:#FFFCF5; --text:#49382E; --muted:#79604F;
  --primary:#A34E32; --deep:#793922; --line:#E9DBC8; --soft:#F6E8D6; --light:#FBF0E2;
  --orange:#96611F; --orange-bg:#F8EAC8; --red:#A23843; --red-bg:#FBE5E3;
  --blue:#5A7060; --blue-bg:#EEF0DD; --focus:#CA9271;
  --side-bg:#F5ECDD; --hero-bg:#F6E5C7; --hero-line:#E9CE9E;
  --art-bg:#FFFDF5; --art-line:#DAB987; --art-orbit:#DABB89;
  --canvas-bg:#FFFBF1; --snake-bg:#FAF3E3; --canvas-alt:#F7EEDC; --canvas-grid:#E9DCC3; --snake-grid:#E9DCC3;
  --canvas-floor:#EFDEC0; --canvas-muted:#876C47; --canvas-line:#BF9B67; --canvas-label:#7F603B;
  --canvas-card:#FFFEF8; --canvas-card-border:#CFB282; --canvas-card-shadow:#EBDAB7;
  --canvas-text:#49382E; --canvas-ink:#A34E32; --canvas-pointer:#A34E32; --canvas-basket:#EAC996;
  --canvas-weave:#B08E59; --canvas-rim:#F5E5C7; --snake-body:#D2AB8A; --snake-tail:#E7CCAD;
  --garden:#F4EFDC; --garden-glow:#E4E1C0;
}
:root[data-appearance="lavender"] {
  --bg:#F6F4FC; --paper:#FFFFFF; --text:#332C4E; --muted:#6C6282;
  --primary:#704CC7; --deep:#513397; --line:#E5DEF0; --soft:#EFE8FC; --light:#F4F0FC;
  --orange:#9C5F3D; --orange-bg:#FFF1E7; --red:#AD4059; --red-bg:#FDEAF0;
  --blue:#426C83; --blue-bg:#EBF5F9; --focus:#AE8DE0;
  --side-bg:#F0EBF8; --hero-bg:linear-gradient(125deg,#EAE3FF 0%,#F2EAFE 45%,#E1EEFB 100%);
  --hero-line:#DFD4F2; --art-bg:#FFFDFF; --art-line:#D2BCE9; --art-orbit:#CBBAE4;
  --canvas-bg:#FBF8FF; --snake-bg:#F6F1FC; --canvas-alt:#F1EBFB; --canvas-grid:#E5DCF3; --snake-grid:#E5DCF3;
  --canvas-floor:#E8DEF6; --canvas-muted:#7B6993; --canvas-line:#B098D0; --canvas-label:#745B95;
  --canvas-card:#FFFFFF; --canvas-card-border:#CEBBE9; --canvas-card-shadow:#E5DAF4;
  --canvas-text:#332C4E; --canvas-ink:#704CC7; --canvas-pointer:#704CC7; --canvas-basket:#DBC8EF;
  --canvas-weave:#AE8DCD; --canvas-rim:#EAE0F8; --snake-body:#BCA0DC; --snake-tail:#DAC9EE;
  --garden:#F1EFF7; --garden-glow:#E1E7DD;
}
:root[data-appearance="midnight"] {
  color-scheme:dark;
  --bg:#111626; --paper:#1A2134; --text:#EFF0FC; --muted:#B3BCD2;
  --primary:#B4AAFF; --deep:#D0C9FF; --on-primary:#20213E; --line:#343F58; --soft:#2B3150; --light:#242D45;
  --orange:#EDBE8C; --orange-bg:#3C302D; --red:#FFA8B5; --red-bg:#412839;
  --blue:#9BCDDC; --blue-bg:#253C49; --focus:#B7A9FF;
  --side-bg:#141B2D; --hero-bg:radial-gradient(ellipse at 92% 13%,#343664 0%,transparent 55%),linear-gradient(110deg,#222B47,#22253F);
  --hero-line:#3D4567; --art-bg:#2E3856; --art-line:#62698E; --art-orbit:#58618C;
  --canvas-bg:#171F32; --snake-bg:#171F32; --canvas-alt:#202A40; --canvas-grid:#33405B; --snake-grid:#2B3750;
  --canvas-floor:#27334D; --canvas-muted:#BAC5DC; --canvas-line:#8192B8; --canvas-label:#BDC8E0;
  --canvas-card:#34415E; --canvas-card-border:#7A87AD; --canvas-card-shadow:#0E1526;
  --canvas-text:#F6F4FF; --canvas-ink:#B4AAFF; --canvas-pointer:#B4AAFF; --canvas-basket:#494B7C;
  --canvas-weave:#8680B8; --canvas-rim:#545781; --snake-body:#646C9A; --snake-tail:#424D70;
  --garden:#242F3C; --garden-glow:#374637;
}
/* Functional controls shared by all five appearances. */
.appearance-trigger{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 13px;background:var(--paper);border:1px solid var(--line);border-radius:100px;color:var(--text);font-size:13px;font-weight:550;white-space:nowrap}
.appearance-trigger svg{width:19px;height:19px;color:var(--primary)}
.appearance-trigger:hover{border-color:var(--primary)}
.appearance-current{font-weight:400;font-size:12px;color:var(--muted);padding-left:9px;border-left:1px solid var(--line)}
.theme-dot{display:inline-block;width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--primary)}
.sidebar-note{padding:18px 7px 0}
.sidebar-encourage{font-size:12px;display:block;margin:0 6px 11px}
.sidebar-appearance{display:flex;align-items:center;width:100%;gap:8px;border:1px solid var(--line);background:var(--paper);color:var(--text);min-height:44px;padding:8px 12px;border-radius:11px;font-size:13px}
.sidebar-appearance svg{width:16px;height:16px;margin-left:auto;color:var(--muted)}
.hero-actions,.hero-sun,.hero-planet,.art-float,.art-spark{display:none}
.appearance-intro{font-size:14px;color:var(--muted);margin:-6px 0 22px}
.theme-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.theme-card{display:flex;flex-direction:column;gap:0;text-align:left;min-width:0;padding:7px 7px 13px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--text);transition:border-color .15s,box-shadow .15s;position:relative}
.theme-card:hover{border-color:var(--primary)}
.theme-card.is-selected{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.theme-card-title{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:11px 5px 3px}
.theme-card-title strong{font-size:14px;font-weight:600;white-space:nowrap}
.theme-card-status{font-size:10px;color:var(--muted);white-space:nowrap}
.theme-card.is-selected .theme-card-status{color:var(--primary)}
.theme-card-desc{padding:0 5px;font-size:11px;color:var(--muted);line-height:1.6}
.theme-mini{display:flex;width:100%;aspect-ratio:1.48;min-height:92px;background:var(--mini-bg);border-radius:10px;border:1px solid var(--mini-line);overflow:hidden;position:relative;--mini-bg:#F5F5F0;--mini-paper:#FCFCF9;--mini-side:#EDF0E7;--mini-line:#DAE2D4;--mini-hero:#E3EADC;--mini-primary:#326B5A}
.theme-mini[data-preview="ocean"]{--mini-bg:#F1F6FD;--mini-paper:#FFFFFF;--mini-side:#FAFCFF;--mini-line:#D8E4F3;--mini-hero:linear-gradient(110deg,#D9EBFA,#DCE6FF);--mini-primary:#2861CB}
.theme-mini[data-preview="cream"]{--mini-bg:#FBF5E9;--mini-paper:#FFFEF7;--mini-side:#F3E7D3;--mini-line:#E4D3B7;--mini-hero:#F3DBB0;--mini-primary:#A34E32}
.theme-mini[data-preview="lavender"]{--mini-bg:#F5F1FC;--mini-paper:#FFFFFF;--mini-side:#EDE5F8;--mini-line:#E0D4EC;--mini-hero:linear-gradient(110deg,#E4D3FF,#DCEEF9);--mini-primary:#704CC7}
.theme-mini[data-preview="midnight"]{--mini-bg:#111626;--mini-paper:#20293F;--mini-side:#172036;--mini-line:#3B4561;--mini-hero:linear-gradient(100deg,#293555,#383960);--mini-primary:#B4AAFF}
.mini-side{width:20%;padding:10px 5px;background:var(--mini-side);border-right:1px solid var(--mini-line);display:flex;flex-direction:column;gap:7px}
.mini-side i{height:3px;border-radius:3px;background:var(--mini-line)}
.mini-side i:first-child{width:10px;height:10px;background:var(--mini-primary);margin-bottom:6px}
.mini-side i:nth-child(2){background:var(--mini-primary)}
.mini-main{width:80%;padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.mini-hero{background:var(--mini-hero);border:1px solid var(--mini-line);border-radius:7px;flex:1;min-height:36px;display:flex;align-items:center;justify-content:space-around;padding:4px 9px}
.mini-hero i{background:var(--mini-primary);width:36%;height:4px;position:relative;border-radius:3px}
.mini-hero i:after{content:'';position:absolute;left:0;top:8px;width:80%;height:4px;background:var(--mini-primary);border-radius:3px}
.mini-hero b{font-family:system-ui,sans-serif;line-height:1;font-size:13px;display:grid;place-items:center;transform:rotate(9deg);height:28px;width:25px;border-radius:4px;background:var(--mini-primary);color:var(--mini-bg)}
.mini-stats{display:flex;gap:4px;height:10px}.mini-stats i{background:var(--mini-paper);border:1px solid var(--mini-line);border-radius:3px;flex:1}
.mini-tiles{display:flex;gap:4px;height:20px}.mini-tiles i{background:var(--mini-paper);border:1px solid var(--mini-line);border-radius:5px;flex:1}
.mini-check{display:none;position:absolute;right:5px;top:5px;width:21px;height:21px;border-radius:50%;background:var(--primary);color:var(--on-primary);align-items:center;justify-content:center;box-shadow:0 1px 4px #0002}
.mini-check svg{width:14px;height:14px}.is-selected .mini-check{display:flex}
.appearance-dialog{max-width:920px!important;width:100%}
.appearance-dialog .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.appearance-dialog .theme-mini{aspect-ratio:1.9}
.theme-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:20px;margin-top:24px}
.theme-dialog-footer .button{min-width:140px}
.theme-card:focus-visible,.appearance-trigger:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
/* Shared non-eye component adaptation. No effect on round sizing or hit areas. */
html:not([data-appearance="eye"]) body{background:var(--bg)}
html:not([data-appearance="eye"]) :is(input,select,textarea){background:var(--paper);border-color:var(--line)}
html:not([data-appearance="eye"]) :is(button,a,input,select,textarea,summary):focus-visible{outline-color:var(--focus)}
html:not([data-appearance="eye"]) .button{color:var(--on-primary)}
html:not([data-appearance="eye"]) .button.secondary{color:var(--text)}
html:not([data-appearance="eye"]) .button.ghost{color:var(--primary)}
html:not([data-appearance="eye"]) .button.danger{color:var(--on-primary);background:var(--red)}
html:not([data-appearance="eye"]) .sidebar{background:var(--side-bg)}
html:not([data-appearance="eye"]) .nav-label{color:var(--muted)}
html:not([data-appearance="eye"]) .nav-item:hover{background:var(--soft)}
html:not([data-appearance="eye"]) .nav-item.active{background:var(--soft);color:var(--primary)}
html:not([data-appearance="eye"]) .brand-mark{color:var(--on-primary)}
html:not([data-appearance="eye"]) .topbar{background:var(--bg)}
html:not([data-appearance="eye"]) .hero{background:var(--hero-bg);border-color:var(--hero-line);padding:34px 38px;min-height:282px}
html:not([data-appearance="eye"]) .hero h1{font-size:40px;font-weight:700;letter-spacing:-.055em;line-height:1.37;margin:12px 0}
html:not([data-appearance="eye"]) .hero p{font-size:14px}
html:not([data-appearance="eye"]) .hero-actions{display:flex;align-items:center;gap:15px;margin-top:20px}
html:not([data-appearance="eye"]) .hero-actions .button{min-height:44px;font-size:13px;padding:10px 17px}
html:not([data-appearance="eye"]) .hero-actions>span{font-size:11px;color:var(--muted);max-width:150px}
html:not([data-appearance="eye"]) .hero-art{isolation:isolate}
html:not([data-appearance="eye"]) .orbit{border-color:var(--art-orbit);width:278px;height:278px;opacity:.65}
html:not([data-appearance="eye"]) .orbit:after{border-color:var(--art-orbit);width:226px;height:226px;inset:25px}
html:not([data-appearance="eye"]) .art-word-card{background:var(--art-bg);border-color:var(--art-line);width:137px;height:158px;box-shadow:0 10px 32px #14223E12;z-index:1;border-radius:16px}
html:not([data-appearance="eye"]) .art-word-card.second{background:var(--primary);border-color:var(--primary);color:var(--on-primary);transform:translate(58px,-2px) rotate(11deg)}
html:not([data-appearance="eye"]) .art-word-card:first-of-type{transform:translate(-60px,13px) rotate(-12deg)}
html:not([data-appearance="eye"]) .art-word-card strong{font-size:29px;font-weight:600}
html:not([data-appearance="eye"]) .art-check{background:var(--paper);border-color:var(--line);right:9%;bottom:8%;z-index:2;height:34px;width:34px}
html:not([data-appearance="eye"]) .art-dots{background:var(--primary);box-shadow:210px 45px 0 var(--primary),30px 130px 0 var(--primary);opacity:.4}
html:not([data-appearance="eye"]) .art-float{display:block;position:absolute;padding:6px 11px;border:1px solid var(--art-line);border-radius:8px;font-size:10px;font-weight:650;letter-spacing:.06em;background:var(--art-bg);color:var(--primary);z-index:2;white-space:nowrap}
html:not([data-appearance="eye"]) .float-one{top:4%;left:12%;transform:rotate(-7deg)}
html:not([data-appearance="eye"]) .float-two{bottom:1%;right:22%;transform:rotate(4deg)}
html:not([data-appearance="eye"]) .art-spark{display:block;position:absolute;color:var(--primary);font-size:26px;opacity:.8;z-index:2}
.spark-one{top:4%;right:5%}.spark-two{bottom:11%;left:4%}
html:not([data-appearance="eye"]) .stats{border-radius:18px;margin-bottom:27px}
html:not([data-appearance="eye"]) .stat{padding-top:17px;padding-bottom:17px}
html:not([data-appearance="eye"]) .book-mark{background:var(--soft);border-color:var(--primary)}
html:not([data-appearance="eye"]) .pill.green{background:var(--soft);color:var(--primary)}
html:not([data-appearance="eye"]) .pill.orange{background:var(--orange-bg);color:var(--orange)}
html:not([data-appearance="eye"]) .game-card{border-radius:20px;min-height:230px;padding:23px}
html:not([data-appearance="eye"]) .game-card:hover{border-color:var(--primary);box-shadow:0 8px 24px #16264A0C}
html:not([data-appearance="eye"]) .game-icon{width:48px;height:48px;border-radius:15px}
html:not([data-appearance="eye"]) .game-number{color:var(--muted)}
html:not([data-appearance="eye"]) .game-card-footer .tag{background:var(--light);font-size:11px}
html:not([data-appearance="eye"]) .game-card-footer>svg{box-sizing:content-box;padding:7px;border:1px solid var(--line);border-radius:50%;background:var(--paper)}
html:not([data-appearance="eye"]) .game-card.import-card{background:var(--light)}
html:not([data-appearance="eye"]) .import-card .game-icon{background:var(--paper);color:var(--primary)}
html:not([data-appearance="eye"]) :is(.notice,.config-rules,.correction .definition){background:var(--light);border-color:var(--line)}
html:not([data-appearance="eye"]) .notice.warn{background:var(--orange-bg);color:var(--orange)}
html:not([data-appearance="eye"]) .notice.error{background:var(--red-bg);color:var(--red)}
html:not([data-appearance="eye"]) .book-card.selected{background:var(--light)}
html:not([data-appearance="eye"]) .book-spine{background:var(--soft);border-color:var(--line);border-left-color:var(--primary)}
html:not([data-appearance="eye"]) .segmented{background:var(--soft);border-color:var(--line)}
html:not([data-appearance="eye"]) .segmented button.active{background:var(--paper);color:var(--primary)}
html:not([data-appearance="eye"]) .quantity button{background:var(--paper);border-color:var(--line)}
html:not([data-appearance="eye"]) .quantity button.active{background:var(--soft);border-color:var(--primary);color:var(--primary)}
html:not([data-appearance="eye"]) .switch{background:var(--soft);border-color:var(--line)}
html:not([data-appearance="eye"]) .switch[aria-checked=true]{background:var(--primary);border-color:var(--primary)}
html:not([data-appearance="eye"]) .switch:before{background:var(--paper)}
html:not([data-appearance="eye"]) .chip.active{color:var(--on-primary)}
html:not([data-appearance="eye"]) .toast{color:var(--bg)}
html:not([data-appearance="eye"]) .bottom-nav{background:var(--paper)}
html:not([data-appearance="eye"]) .bottom-nav button{color:var(--muted)}
html:not([data-appearance="eye"]) .bottom-nav button.active{color:var(--primary)}
html:not([data-appearance="eye"]) .bottom-nav button.active svg{background:var(--soft);outline-color:var(--soft)}
html:not([data-appearance="eye"]) .word-actions .icon-button{background:var(--light)}
/* The actual gameplay surfaces, not just the navigation, follow the theme. */
html:not([data-appearance="eye"]) :is(.game-prompt,.game-footer,.controls,.catch-play .catch-controls){background:var(--light)}
html:not([data-appearance="eye"]) .control-button{background:var(--paper);border-color:var(--line);color:var(--primary)}
html:not([data-appearance="eye"]) .control-button:active{background:var(--soft)}
html:not([data-appearance="eye"]) .catch-controls .control-label strong{color:var(--text)}
html:not([data-appearance="eye"]) .catch-controls .control-label span{color:var(--muted)}
html:not([data-appearance="eye"]) .canvas-stage{background:var(--canvas-bg)}
html:not([data-appearance="eye"]) .pair-card{background:var(--soft);border-color:var(--line)}
html:not([data-appearance="eye"]) .pair-card .card-back{color:var(--primary);opacity:.65}
html:not([data-appearance="eye"]) .pair-card.face-up{background:var(--paper);color:var(--text)}
html:not([data-appearance="eye"]) .pair-card.chinese{background:var(--light)}
html:not([data-appearance="eye"]) .pair-card.selected{background:var(--soft);border-color:var(--primary)}
html:not([data-appearance="eye"]) .pair-card.matched{background:var(--soft);color:var(--primary)}
html:not([data-appearance="eye"]) .pair-card.failed{background:var(--red-bg);border-color:var(--red)}
html:not([data-appearance="eye"]) .unknown-word{background:var(--light);color:var(--muted);border-color:var(--line)}
html:not([data-appearance="eye"]) :is(.progress-track,.timer-bar){background:var(--soft)}
html:not([data-appearance="eye"]) .timer-bar>div{background:var(--primary)}
html:not([data-appearance="eye"]) .result-hero{background:var(--hero-bg);border-color:var(--line)}
html:not([data-appearance="eye"]) .result-icon{background:var(--paper);border-color:var(--line)}
html:not([data-appearance="eye"]) .mole-play .mole-garden{background:var(--garden)}
html:not([data-appearance="eye"]) .mole-play .mole-field{background:radial-gradient(ellipse at 50% 100%,var(--garden-glow),transparent 75%),var(--garden)}
html:not([data-appearance="eye"]) .mole-play .mole-round-meter{background:var(--light);color:var(--muted)}
html:not([data-appearance="eye"]) .mole-play .mole-meter-track{background:var(--soft)}
html:not([data-appearance="eye"]) .mole-play #mole-timer{background:var(--primary)}
html:not([data-appearance="eye"]) .mole-play .hole-number{color:var(--muted)}
html:not([data-appearance="eye"]) .mole-play .mole-word:focus-visible .mole-sign{outline-color:var(--primary)}
/* Four distinct art directions in addition to the preserved original. */
html[data-appearance="ocean"] .hero{border-radius:28px}
html[data-appearance="ocean"] .game-card-head{margin:-10px -10px 2px;padding:10px;border-radius:13px;background:linear-gradient(110deg,#F0F6FF,#FAFCFF)}
html[data-appearance="ocean"] .game-number{height:29px;width:29px;border-radius:50%;display:grid;place-items:center;background:white;border:1px solid var(--line);color:var(--primary)}
html[data-appearance="ocean"] .game-card-footer>svg{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
html[data-appearance="ocean"] .hero:after{content:'';position:absolute;width:580px;height:180px;border-radius:50%;right:-210px;bottom:-120px;border:22px solid #C9DFFA;pointer-events:none;transform:rotate(-18deg)}
html[data-appearance="cream"] .hero{border-radius:26px 64px 26px 26px;border-style:dashed}
html[data-appearance="cream"] .hero-sun{display:block;position:absolute;top:2%;right:8%;width:80px;height:80px;border-radius:50%;background:#EBC579;box-shadow:0 0 0 12px #EBC57933;z-index:-1}
html[data-appearance="cream"] .orbit{border-style:dotted;border-width:2px}
html[data-appearance="cream"] .art-word-card{border-radius:5px;box-shadow:5px 6px 0 #C9A47240}
html[data-appearance="cream"] .art-word-card:after{content:'';position:absolute;top:-10px;width:49px;height:22px;background:#EED6AAB3;transform:rotate(3deg);border-left:2px dashed #D4B787;border-right:2px dashed #D4B787}
html[data-appearance="cream"] .game-card{border-radius:17px;border-bottom:4px solid #DDC9AE;box-shadow:0 2px 0 #F0E8D9}
html[data-appearance="cream"] .game-icon{border:1px dashed #CFB48F;background:#FAEDD1;transform:rotate(-6deg)}
html[data-appearance="cream"] .game-icon.blue{background:#EAEEDC;border-color:#B7C19F}
html[data-appearance="cream"] .game-icon.orange{background:#F5DECE;border-color:#D8B797}
html[data-appearance="cream"] .game-card-footer .tag{background:#F4EAD7;border-radius:100px}
html[data-appearance="cream"] .float-one{border-radius:3px;background:#FDF7DF;transform:rotate(-9deg)}
html[data-appearance="cream"] .float-two{background:#FDF7DF;border-radius:3px}
html[data-appearance="lavender"] .hero{border-radius:32px;box-shadow:inset 0 0 0 4px #FFFFFF44}
html[data-appearance="lavender"] .hero-planet{display:block;position:absolute;right:1%;bottom:-5%;width:185px;height:185px;border-radius:50%;background:radial-gradient(circle at 25% 25%,#EEF3FF,#D1C4F1 70%,#B9A3E2);opacity:.8;z-index:-1}
html[data-appearance="lavender"] .art-word-card{box-shadow:0 13px 26px #58438520}
html[data-appearance="lavender"] .game-card{background:linear-gradient(135deg,#FFFFFF,#FCFAFF);border-radius:24px;box-shadow:0 4px 16px #39206B05}
html[data-appearance="lavender"] .game-icon{border-radius:50%;background:#EDE5FC}
html[data-appearance="lavender"] .game-icon.blue{background:#E6F2F8}
html[data-appearance="lavender"] .game-icon.orange{background:#FBE9EF;color:#A64A74}
html[data-appearance="lavender"] .game-number{font-size:19px;letter-spacing:-.03em;color:#9583AD;font-weight:300}
html[data-appearance="lavender"] .game-card-footer>svg{border:0;background:#EEE7FA}
html[data-appearance="lavender"] .hero h1 em{color:#7951BA}
html[data-appearance="midnight"] .hero{border-radius:24px}
html[data-appearance="midnight"] .hero:before{content:'';position:absolute;width:220px;height:220px;right:20px;top:20px;background-image:radial-gradient(circle,#D4D8F6 1px,transparent 1.5px);background-size:46px 51px;opacity:.22;pointer-events:none}
html[data-appearance="midnight"] .hero-planet{display:block;position:absolute;width:115px;height:115px;right:0%;top:1%;border-radius:50%;background:radial-gradient(circle at 28% 25%,#DCD5FF,#8E87C5 55%,#414564);box-shadow:0 0 28px #938ED018;z-index:-1}
html[data-appearance="midnight"] .game-card{border-radius:18px;background:linear-gradient(145deg,#202940,#192134);border-color:#36405B}
html[data-appearance="midnight"] .game-card:hover{box-shadow:0 5px 28px #0003;border-color:var(--primary)}
html[data-appearance="midnight"] .game-icon{background:#363657;border:1px solid #535276}
html[data-appearance="midnight"] .game-icon.blue{background:#283E4D;border-color:#3E596C}
html[data-appearance="midnight"] .game-icon.orange{background:#42362F;border-color:#665044}
html[data-appearance="midnight"] .game-card-footer>svg{background:#303953;border-color:#414C6A}
html[data-appearance="midnight"] .game-card.import-card{background:transparent;border-style:dashed}
html[data-appearance="midnight"] .art-word-card.second{background:#C2B8FA;border-color:#C2B8FA;color:#252439}
html[data-appearance="midnight"] .float-one{background:#26304A}
html[data-appearance="midnight"] .modal-backdrop{background:#070B18BB}
html[data-appearance="midnight"] .modal{border:1px solid var(--line);box-shadow:0 18px 80px #0005}
html[data-appearance="midnight"] .mole-play .hole-shadow{border-color:#93856D;background:#1F201F;box-shadow:inset 0 7px 7px #141716}
html[data-appearance="midnight"] .mole-play .hole-rim{border-color:#93856D}
html[data-appearance="midnight"] .mole-play .mole-sign{background:#F5E8D0;border-color:#B5A07C;color:#3E342A}
html[data-appearance="midnight"] .mole-play .mole-word.correct .mole-sign{background:#C7DCC3;border-color:#648060;color:#283F2C}
html[data-appearance="midnight"] .mole-play .mole-word.incorrect .mole-sign{background:#F0D8D2;color:#563B39}
@media(min-width:1550px){html:not([data-appearance="eye"]) .hero{min-height:302px}html:not([data-appearance="eye"]) .hero h1{font-size:44px}}
@media(max-width:1150px){
  .theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not([data-appearance="eye"]) .hero{padding:28px;min-height:262px}
  html:not([data-appearance="eye"]) .hero h1{font-size:35px}
  html:not([data-appearance="eye"]) .game-card{padding:19px}
  html:not([data-appearance="eye"]) .art-word-card{width:112px;height:138px}
  html:not([data-appearance="eye"]) .art-word-card:first-of-type{transform:translate(-43px,10px) rotate(-12deg)}
  html:not([data-appearance="eye"]) .art-word-card.second{transform:translate(52px,-2px) rotate(10deg)}
  html:not([data-appearance="eye"]) .orbit{width:230px;height:230px}
  html:not([data-appearance="eye"]) .orbit:after{width:184px;height:184px;inset:22px}
  html:not([data-appearance="eye"]) .hero-actions>span{display:none}
  html:not([data-appearance="eye"]) .float-one{left:1%}
}
@media(max-width:900px){
  html:not([data-appearance="eye"]) .hero{grid-template-columns:1.1fr 1fr;min-height:245px;padding:25px}
  html:not([data-appearance="eye"]) .hero h1{font-size:31px}
  html:not([data-appearance="eye"]) .hero p{font-size:12px}
  html:not([data-appearance="eye"]) .art-word-card{width:97px;height:120px}
  html:not([data-appearance="eye"]) .art-word-card strong{font-size:25px}
  html:not([data-appearance="eye"]) .art-word-card:first-of-type{transform:translate(-35px,10px) rotate(-12deg)}
  html:not([data-appearance="eye"]) .art-word-card.second{transform:translate(46px,-2px) rotate(10deg)}
  html:not([data-appearance="eye"]) .float-two{right:8%}
  html:not([data-appearance="eye"]) .orbit{width:210px;height:210px}
  html:not([data-appearance="eye"]) .orbit:after{width:174px;height:174px;inset:17px}
}
@media(max-width:700px){
  .appearance-trigger{gap:7px;padding:8px 12px;font-size:12px}
  .appearance-current{display:none}
  .topbar-tools{gap:0}
  .theme-grid,.appearance-dialog .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .theme-card-title{padding-top:9px}.theme-card-title strong{font-size:13px}.theme-card-desc{font-size:10px}
  .theme-mini{min-height:84px;aspect-ratio:1.7}
  .appearance-dialog .theme-mini{aspect-ratio:1.8;min-height:80px}
  .appearance-dialog{padding:21px 18px!important;max-height:calc(100dvh - 24px)}
  .appearance-dialog .modal-title-row h2{font-size:22px}
  .appearance-dialog .modal-subtitle{margin-bottom:19px}
  .theme-dialog-footer{margin-top:19px;padding-top:16px}
  .theme-dialog-footer .button{font-size:13px;min-width:110px}
  .appearance-panel .settings-title{gap:8px}
  .appearance-panel .settings-title .pill{font-size:10px;padding:3px 7px}
  .appearance-intro{font-size:13px;line-height:1.8;margin-bottom:18px}
  html:not([data-appearance="eye"]) .content:not(.play-content){padding-top:18px}
  html:not([data-appearance="eye"]) .hero{min-height:240px;padding:23px 21px;border-radius:24px;grid-template-columns:1.15fr .85fr}
  html:not([data-appearance="eye"]) .hero h1{font-size:30px;line-height:1.42;margin:10px 0}
  html:not([data-appearance="eye"]) .hero p{font-size:12px;max-width:177px;line-height:1.8}
  html:not([data-appearance="eye"]) .hero-actions{margin-top:16px}
  html:not([data-appearance="eye"]) .hero-actions .button{padding:9px 13px;font-size:12px}
  html:not([data-appearance="eye"]) .hero-art{min-height:155px}
  html:not([data-appearance="eye"]) .art-word-card{width:88px;height:111px;border-radius:12px}
  html:not([data-appearance="eye"]) .art-word-card:first-of-type{transform:translate(-18px,22px) rotate(-12deg)}
  html:not([data-appearance="eye"]) .art-word-card.second{transform:translate(26px,-27px) rotate(10deg)}
  html:not([data-appearance="eye"]) .art-word-card strong{font-size:23px}
  html:not([data-appearance="eye"]) .orbit{width:172px;height:172px;transform:translate(5px,0) rotate(-20deg)}
  html:not([data-appearance="eye"]) .orbit:after{width:142px;height:142px;inset:14px}
  html:not([data-appearance="eye"]) .float-one{top:-1%;left:-5%;font-size:8px;padding:4px 7px}
  html:not([data-appearance="eye"]) .float-two{bottom:4%;right:-6%;font-size:8px;padding:4px 7px}
  html:not([data-appearance="eye"]) .art-check{right:-4%;bottom:16%;width:29px;height:29px}
  html:not([data-appearance="eye"]) .art-dots{box-shadow:70px 140px 0 var(--primary)}
  html:not([data-appearance="eye"]) .art-spark{font-size:19px}
  html:not([data-appearance="eye"]) .spark-one{right:-1%;top:12%}
  html:not([data-appearance="eye"]) .spark-two{left:-15%;bottom:25%}
  html:not([data-appearance="eye"]) .stat{padding:13px 12px}
  html:not([data-appearance="eye"]) .stats{border-radius:16px;margin-bottom:23px}
  html:not([data-appearance="eye"]) .game-card{min-height:220px;padding:17px;border-radius:18px}
  html:not([data-appearance="eye"]) .game-card h3{font-size:19px}
  html:not([data-appearance="eye"]) .game-icon{width:40px;height:40px;border-radius:12px}
  html:not([data-appearance="eye"]) .game-card-footer .tag{font-size:10px}
  html:not([data-appearance="eye"]) .game-card-footer>svg{width:17px;height:17px;padding:5px}
  html:not([data-appearance="eye"]) .game-card.import-card h3{font-size:17px}
  html[data-appearance="cream"] .hero{border-top-right-radius:42px}
  html[data-appearance="cream"] .hero-sun{width:56px;height:56px;right:-1%;top:9%}
  html[data-appearance="cream"] .art-word-card{border-radius:4px}
  html[data-appearance="midnight"] .hero-planet{width:79px;height:79px;right:-12%;top:0}
  html[data-appearance="lavender"] .hero-planet{width:128px;height:128px;right:-17%;bottom:11%}
  html[data-appearance="lavender"] .game-icon{border-radius:50%}
  .settings-grid{min-width:0}.settings-row{gap:12px}
}
@media(max-width:380px){
  .appearance-trigger{padding:8px 10px}
  .appearance-dialog{padding:18px 14px!important}
  .appearance-dialog .theme-mini{min-height:72px}
  .theme-card{padding:5px 5px 9px;border-radius:13px}
  .theme-card-title{padding-left:3px;padding-right:3px}.theme-card-desc{padding-left:3px;padding-right:3px;font-size:10px}
  .theme-card-status{font-size:9px}.theme-dialog-footer .small{font-size:12px}
  .appearance-dialog .theme-grid{gap:11px}
  .theme-dialog-footer{gap:8px}
  html:not([data-appearance="eye"]) .hero{padding:21px 17px;grid-template-columns:1.12fr .88fr;min-height:241px}
  html:not([data-appearance="eye"]) .hero h1{font-size:27px}
  html:not([data-appearance="eye"]) .hero-tag{font-size:10px;letter-spacing:0}
  html:not([data-appearance="eye"]) .hero-description{max-width:155px}
  html:not([data-appearance="eye"]) .hero-art .art-word-card{width:75px;height:99px}
  html:not([data-appearance="eye"]) .art-word-card strong{font-size:20px}
  html:not([data-appearance="eye"]) .art-word-card:first-of-type{transform:translate(-12px,29px) rotate(-12deg)}
  html:not([data-appearance="eye"]) .art-word-card.second{transform:translate(20px,-26px) rotate(10deg)}
  html:not([data-appearance="eye"]) .art-float{font-size:7px}
  html:not([data-appearance="eye"]) .game-card{padding:14px;min-height:220px}
  html:not([data-appearance="eye"]) .game-card h3{font-size:17px}
  html:not([data-appearance="eye"]) .game-card p{font-size:12px}
  html:not([data-appearance="eye"]) .game-card-footer{gap:4px}
  html:not([data-appearance="eye"]) .game-card-footer .tag{font-size:9px;padding:2px 5px}
  html:not([data-appearance="eye"]) .game-card-footer>svg{padding:4px;width:15px;height:15px}
  html:not([data-appearance="eye"]) .stat{padding:13px 10px}
  html:not([data-appearance="eye"]) .stat-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
  .theme-card,.appearance-trigger,html:not([data-appearance="eye"]) .game-card{transition:none}
  html:not([data-appearance="eye"]) .game-card:hover{transform:none}
}

.hero-new-description{display:none}
html:not([data-appearance="eye"]) .hero-description{display:none}
html:not([data-appearance="eye"]) .hero-new-description{display:block;max-width:24em}
html[data-appearance="ocean"] .hero:after{z-index:0}
html[data-appearance="ocean"] .hero-art{z-index:1}
/* Native select minimum sizes must not widen the library on a 320px phone. */
.filters-grid>*{min-width:0}.filters-grid select{width:100%}
@media(max-width:900px){.filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.date-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.date-filter>label{min-width:0}}
@media(max-width:380px){.filters-grid,.date-filter{grid-template-columns:minmax(0,1fr)}.filters-grid .search-box,.date-filter label:last-child{grid-column:1}}
/* Arcade labels and key depth use the selected palette as well. */
html:not([data-appearance="eye"]) .arcade-play .prompt-secondary{background:var(--soft);border-color:var(--line);color:var(--primary)}
html:not([data-appearance="eye"]) .catch-controls .control-button{box-shadow:0 3px 0 var(--line)}
html:not([data-appearance="eye"]) .catch-controls .control-button:active{box-shadow:none}
html:not([data-appearance="eye"]) .segmented .active{border-color:var(--line)}
/* Keep decorative waves behind the content, especially the mobile start button. */
html:not([data-appearance="eye"]) .hero>div:first-child{position:relative;z-index:2}
@media(max-width:600px){html[data-appearance="ocean"] .hero:after{width:240px;height:95px;right:-85px;bottom:-65px;border-width:14px;transform:rotate(-12deg)}}