/* Lisa's palette: orange ground, pearl glass, warm yellow, sky and soft rose. */
:root{--lisa-orange:#ff9027;--lisa-cream:#fff4df;--lisa-yellow:#ffdd83;--lisa-sky:#c5dce8;--lisa-rose:#edc4bc;--lisa-cocoa:#50372d;--bg:#ffd3a1;--ink:#49352d;--muted:#846859;--accent:#805036;--line:#dcb894;--accent-soft:#ffe2a1;--glass:#fff6e1b8}
body{background:radial-gradient(ellipse at 9% 8%,#fff2d9dd,transparent 48%),radial-gradient(ellipse at 91% 29%,#ffdb9f9c,transparent 45%),linear-gradient(155deg,#ffd29a 0%,#ffc17e 48%,var(--lisa-orange) 100%);color:var(--ink)}
header{background:#fff3df4d;border-color:#fff7e1b3}.brand{color:#50372d}.brand small{color:#866346}.local{color:#745d43}.local i{background:#b65a2e}.quiet,.actions button,select{color:#604431;background:linear-gradient(135deg,#fff9edb3,#fff0d75c);border-color:#fff7e5c7;box-shadow:inset 0 1px #fffaf0,0 3px 10px #9750240b}.sound-toggle,.motion-toggle{color:#644a38}
.lisa-avatar{position:relative;display:block;overflow:hidden;isolation:isolate;flex-shrink:0;background:#eed7b6;border:0!important;box-shadow:0 0 0 2px #fff6e6b3,0 3px 9px #82532a18}
/* Crop inside the original drawing's outer frame without altering its pixels. */
.lisa-avatar img{position:absolute;left:-10%;top:-8%;width:120%;height:120%;max-width:none;object-fit:cover;display:block;pointer-events:none}
.brand-avatar{width:42px;height:42px;border-radius:15px}.player-avatar{width:46px;height:46px;flex-basis:46px;border-radius:17px}.player b{color:#513b30}.player small{color:#806849}.eyebrow{color:#8c582e}h1{color:#52382a}h1 span{color:#da782f}.intro p{color:#866345}
.panel{--panel-top:#fff9eacc;--panel-bottom:#fff0d789;background:linear-gradient(135deg,var(--panel-top),var(--panel-bottom));border-color:#fff8e6cf;box-shadow:inset 1px 1px 1px #fffaf2,inset -1px -1px 2px #aa774022,0 12px 30px #8e4b200c,0 2px 4px #fff3df55}.panel:hover{border-color:#fff6db;box-shadow:inset 1px 1px #fffaf2,0 8px 22px #8e4b2010}
.settings-panel{--panel-top:#fff8e8e6;--panel-bottom:#ffedc8b8}.search-panel{--panel-top:#eff7f7e8;--panel-bottom:#d5e7edbd}.history-panel{--panel-top:#fff1eae8;--panel-bottom:#efd0c5b8}.analysis-panel{--panel-top:#fff9e0ed;--panel-bottom:#ffe3a6bd}
.panel-title>span{color:#846b56}.search-panel .panel-title>span{color:#6a8390}.panel h2{color:#594233}.search-panel h2{color:#426373}.history-panel h2{color:#80534a}.play-mode-label{border-color:#be8c6130}.mode{border-color:#ba94693d}.mode:hover{border-color:#bf8756}.mode b{color:#68482f}.mode small{color:#8b7053}.mode i,.mode.active i{color:#b86c34}.mode-track{background:linear-gradient(135deg,#ffe5aebf,#ffcd8880);border-color:#c89355a8;box-shadow:inset 1px 1px #fff8e8,0 4px 10px #9750240b}.muted{color:#876d52}
.stats b{color:#365e70}.stats small{color:#667f89}.insight{color:#536e78;border-color:#93b1be55}.text-btn{color:#936357}.history-head{background:#ba7b6320;color:#8a6052}.history-row:nth-child(even){background:#fff7eb55}.history-row:last-child{color:#6f4b3d}.history-row span:first-child{color:#a27e6d}.empty{color:#947b6b}.analysis-status{color:#826136}.analysis-note{color:#8a7558}.candidate{background:#fffaf14d;border-color:#fff5d8c2}.candidate[aria-pressed=true]{background:linear-gradient(120deg,#ffdb97b3,#fff6e69c);border-color:#ca964b}.candidate-rank{color:#ad7c39}.candidate-body small{color:#8c7655}.candidate-score{color:#986323}
.actions .primary{background:linear-gradient(135deg,#bc6b32,#8b492a)!important;border-color:#a95b30!important;color:#fff9ed;box-shadow:inset 0 1px #ffe3b47a,0 5px 12px #91502729}.badge{background:#fff0ce88;color:#84603a}.coach-move{color:#956738;background:#ffebc47a;border-color:#fff8e4b3}.coach-avatar{background:linear-gradient(135deg,#936e44,#62472f);border-color:#fff0c77d}.coach-avatar[data-reaction=capture]{box-shadow:0 0 0 3px #f6c87966,inset 0 1px #fff3d830}
.island{background:linear-gradient(135deg,#6c4934ee,#452e25ed 70%,#684331e8);border-color:#ffdeae70;box-shadow:inset 0 1px #fff0d84d,0 7px 20px #7a3f2426;color:#fff5df}.island.expanded{box-shadow:inset 0 1px #fff0d84d,0 16px 32px #7a3f2430}.island[data-state=check]{background:linear-gradient(135deg,#9c5e48ee,#673c32ed)}.island-icon{color:#ffd48c}.island-copy small,.island-chevron{color:#e9cba7}.thinking-bars i{background:#ffd48c}.island-detail-actions button{border-color:#ffe8c24d;color:#fff4de;background:#ffddb51c}.island-detail-actions button:first-child{background:#ffcf8b30;color:#ffe7bd}.island-detail-actions button:hover:not(:disabled){background:#ffe7c338}.island::before{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fff1cb33,transparent 65%)}
.board-shell{background:linear-gradient(135deg,#c894659e,#8b5b3dd1);border-color:#fff0d1bd;box-shadow:inset 1px 1px #fff0d7c4,inset -1px -1px #75482f33,0 20px 42px #8a4a2529}.square{background:#fff0d0}.square.dark-square{background:#ba9176}.square.last{background:#f8dfa0}.square.dark-square.last{background:#dfb86d}#board .square.selected{background:#bdd7d5;box-shadow:inset 0 0 0 2px #6d9fa4}.coord{color:#956b4a}.dark-square .coord{color:#fff1d4}.dot{background:#3e72765c}.capture{border-color:#52878b88}.square.check{box-shadow:inset 0 0 0 4px #bc5652}.hint-arrow-line{stroke:#477e92}.hint-arrow-head{fill:#477e92}.hint-arrow-tail{fill:#7db4c2}.hint-halo{border-color:#76afbd;background:#a5d2da2b}.hint-to .hint-halo{background:#bce1e84d;border-color:#5c97aa}.square.hint-from{box-shadow:inset 0 0 0 2px #6395a4}.square.hint-to{box-shadow:inset 0 0 0 2px #5e96aa}.move-feedback{border-color:#fff3cf}
.turn-caption{color:#916641}.turn-track{background:#f5d8ab80;border-color:#fff2d0c4;box-shadow:inset 0 1px 4px #85572d12}.turn-slider{background:#fff6df;border-color:#fff9ed;box-shadow:0 2px 7px #84552920}.turn-track[data-turn=b] .turn-slider{background:#805639;border-color:#a27950}.turn-side{color:#9c7c5a}.turn-side[aria-current=true]{color:#805126}.turn-track[data-turn=b] #turnBlack{color:#fff0d5}.white-dot{background:#fffae9;border-color:#c3a37d}.black-dot{background:#795136;border-color:#795136}.turn-track[data-turn=b] .black-dot{background:#f6dba8;border-color:#ffedc7}
.about{border-color:#bc8a5a4d;color:#8b684e}.about summary{color:#765436}.about a{color:#8b4b2c}.asset-credit{color:#9b7b60}footer{border-color:#bc8a5a4d;color:#9a7454}
button:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#397e96}
/* Functional dialogs share the palette, including every promotion state. */
dialog{background:linear-gradient(135deg,#fff9edfa,#ffedd5f5);border-color:#fff7e1;color:#573e2e;box-shadow:0 24px 80px #77462940}dialog p{color:#92775c}dialog::backdrop{background:#54372855}
#promotion{background:radial-gradient(ellipse at 12% 0%,#ffe0a5c9,transparent 65%),linear-gradient(135deg,#fffaf0f5,#ffecd4ef);box-shadow:inset 0 1px 1px #fff9ed,0 28px 90px #77462940}#promotion::backdrop{background:#54372855}.promotion-eyebrow{color:#a3794d}#promotion h2 span{color:#dc913d}#promotion #promotionRoute{color:#95704a}#promotion #promotionCancel{color:#946f4a;background:#fff6e49c}.promotion-flow{color:#c5a069}.promotion-preview-wrap{background:linear-gradient(145deg,#fff9eb,#f7ddb47d);box-shadow:0 8px 20px #9b693016,inset 0 1px #fffaf2}#promotionPreviewName{color:#9a794f}#promotion #promotionOptions .promotion-choice{background:#fff8eb88;box-shadow:inset 0 1px #fff9ed,0 4px 12px #9b693008}#promotion #promotionOptions .previewed{border-color:#d4aa63;background:#ffebc4ba}#promotionOptions small{color:#a38b67}#promotionOptions kbd{color:#b6a181}#promotion #promotionOptions button:focus-visible{outline-color:#bd8f46}#promotion #promotionHelp{color:#967a56}#promotionHelp span{color:#ac9575}#promotion[data-choosing=q] #promotionOptions [data-type=q],#promotion[data-choosing=r] #promotionOptions [data-type=r],#promotion[data-choosing=b] #promotionOptions [data-type=b],#promotion[data-choosing=n] #promotionOptions [data-type=n]{background:#ffe2a3;border-color:#ce9c4d;box-shadow:0 0 0 3px #e5bc6f22}
@keyframes promotion-backdrop-in{from{background:#54372800}to{background:#54372855}}
html[data-effects=light] .panel{background:linear-gradient(135deg,var(--panel-top),var(--panel-bottom));box-shadow:inset 1px 1px #fff8ed,0 5px 16px #8e4b200b}html[data-effects=light] .island{background:linear-gradient(135deg,#714c35,#4d3328)}html[data-effects=light] .island[data-state=check]{background:linear-gradient(135deg,#9c5e48,#673c32)}html[data-effects=light] .board-shell{box-shadow:inset 1px 1px #fff0d7b3,0 9px 20px #8a4a2526}html[data-effects=light] dialog{background:linear-gradient(135deg,#fff9ef,#ffe9cd)}html[data-effects=light] #promotion{background:linear-gradient(135deg,#fff8e8,#ffe6bf)}
@media(max-width:600px){.brand-avatar{width:35px;height:35px;border-radius:12px}.player-avatar{width:40px;height:40px;flex-basis:40px;border-radius:14px}.brand{gap:10px}}
@supports not (backdrop-filter:blur(1px)){.panel{background:linear-gradient(135deg,var(--panel-top),var(--panel-bottom))}.island{background:#5a3b2c}}

/* Gold accents: Adobe gold reference + a shaded UI scale following Radix's roles.
   Source references: color.adobe.com/meanings/gold and radix-ui.com/colors/docs/palette-composition/understanding-the-scale.
   Surface, highlight and outline are adapted for this orange/cream chess palette. */
:root{--gold:#d4af37;--gold-light:#fff2c8;--gold-edge:#5c4015;--gold-ink:#4f3422;--gold-soft:#f4dc95;--gold-surface:linear-gradient(125deg,#e7c76c 0%,#fff0bf 30%,#e8c66a 64%,#d4af37 100%)}
.island,.island[data-state=check],html[data-effects=light] .island,html[data-effects=light] .island[data-state=check]{background:var(--gold-surface);color:var(--gold-ink);border-color:#fff0bd;box-shadow:inset 0 1px #fff8d6,inset 0 -1px #a8782255,0 8px 22px #9c6b2030}
.island.expanded{box-shadow:inset 0 1px #fff8d6,inset 0 -1px #a8782255,0 16px 32px #9c6b2038}.island::before{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fffbe03d,transparent 65%)}.island::after{border-color:#fff7d866;box-shadow:inset 0 1px #fffce566}.island-icon{color:#775018}.island-copy small,.island-chevron{color:#593f18}.thinking-bars i{background:#886019}
.island-detail-actions button,.island-detail-actions button:first-child{color:#5b3c17;border-color:#a57a325c;background:#fff5ce5c;box-shadow:inset 0 1px #fffbe366}.island-detail-actions button:hover:not(:disabled){background:#fff6d2a6}#islandDescription{color:#593f18!important;border-color:#a57a3240!important}
#board .square.selected{background:var(--gold-soft);box-shadow:inset 0 0 0 2px #98701c}.dot{background:var(--gold);border:1.5px solid var(--gold-edge)}.capture{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-edge),inset 0 0 0 1px var(--gold-edge)}
.hint-arrow-layer{opacity:1}.hint-arrow-outline{fill:none;stroke:var(--gold-edge);stroke-width:17;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}.hint-arrow-line{stroke:var(--gold)}.hint-arrow-head{fill:var(--gold);stroke:var(--gold-edge);stroke-width:2.5;stroke-linejoin:round;paint-order:stroke fill}.hint-arrow-tail{fill:var(--gold-light);stroke:var(--gold-edge);stroke-width:2}
.hint-halo{border-color:#a47a24;background:#f2d67333;box-shadow:inset 0 0 0 1px #fff1ad99}.hint-to .hint-halo{background:#f5d66f4d;border-color:#916818}.square.hint-from{box-shadow:inset 0 0 0 2px #a47a24}.square.hint-to{box-shadow:inset 0 0 0 2px #916818}.move-feedback{border-color:var(--gold);box-shadow:0 0 0 1px #79571966}
.turn-track{background:#ffe6a96b;border-color:#fff1bd;box-shadow:inset 0 1px 4px #9d711621}.turn-slider,.turn-track[data-turn=b] .turn-slider{background:var(--gold-surface);border-color:#fff4c8;box-shadow:0 2px 7px #99701c26}.turn-side[aria-current=true],.turn-track[data-turn=b] #turnBlack{color:var(--gold-ink)}.turn-track[data-turn=b] .black-dot{background:#62471e;border-color:#62471e}.turn-caption{color:#805c2d}
button:focus-visible,select:focus-visible,summary:focus-visible{outline-color:#88601b}

/* Champagne glass: role-separated surface / rim / ink, inspired by Radix
   scale roles and Apple's Materials guidance. Adapted to Lisa's orange ground.
   https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
   https://developer.apple.com/design/human-interface-guidelines/materials */
:root{--gold-surface:linear-gradient(125deg,#f7eed9e8 0%,#edddbae8 54%,#dfc797ed 100%);--gold-ink:#51432f}
.island,.island[data-state=check],html[data-effects=light] .island,html[data-effects=light] .island[data-state=check]{background:var(--gold-surface);color:var(--gold-ink);border-color:#b49a6959;box-shadow:inset 0 1px #fffcf1b3,inset 0 -1px #9677481a,0 6px 18px #6e512b1c,0 1px 3px #6e512b0d}
.island.expanded{box-shadow:inset 0 1px #fffcf1b3,0 10px 24px #6e512b22}
.island::before{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#fffdf44a,transparent 65%)}
.island::after{border-color:#fffaf04d;box-shadow:inset 0 1px #fffdf56b}
.island-icon{color:#806b43;overflow:visible;transition:opacity .16s ease}
.island-copy b{font-weight:550;letter-spacing:.25px}.island-copy small,.island-chevron{color:#6b583e}
.island-chevron{flex:0 0 18px;width:18px;font-size:20px;line-height:1;font-family:system-ui,sans-serif}.expanded .island-chevron{transform:translateX(2px)}
.island-king{display:block;width:30px;height:30px;object-fit:contain;user-select:none;pointer-events:none}
.thinking-bars i{background:#9b7f46}
.island-detail-actions button,.island-detail-actions button:first-child{color:#655030;border-color:#b49a6952;background:#fff9eb59;box-shadow:inset 0 1px #fffaf366}
.island-detail-actions button:hover:not(:disabled){background:#fff9eb9c}
/* A warm travelling highlight keeps one material throughout the search.
   Only transform/opacity animate; no continuously animated blur or shadow. */
html .island[data-state=thinking]::before,html[data-effects=light] .island[data-state=thinking]::before,html .engine-busy .island[data-state=thinking]::before{inset:-35% -70%;background:linear-gradient(110deg,transparent 30%,#fffaf082 46%,#f9e0a969 54%,transparent 70%);opacity:.5;animation:island-gold-light 3s ease-in-out infinite alternate}
@keyframes island-gold-light{from{transform:translateX(-20%);opacity:.25}to{transform:translateX(20%);opacity:.65}}
/* Completion uses the icon slot, with a local teal halo. The gold material,
   move instruction and action arrow stay in place. */
.island[data-celebrating=true] .island-icon{opacity:0;visibility:hidden}
.island-success{position:absolute;left:17px;top:18px;width:30px;height:30px;display:grid;place-items:center;pointer-events:none;z-index:2;isolation:isolate}
.island-success[hidden]{display:none}
.island-success::before{content:'';position:absolute;inset:-9px;border-radius:50%;background:radial-gradient(circle,#2bc2ac21,transparent 70%);z-index:-1}
.island-success img{display:block;width:32px;height:32px;object-fit:contain}
@media(prefers-reduced-motion:reduce){html .island[data-state=thinking]::before{animation:none!important;transform:none!important;opacity:.25}.island-icon{transition:none}}
.reduce-motion .island[data-state=thinking]::before{animation:none!important;transform:none!important;opacity:.25}.reduce-motion .island-icon{transition:none}

/* Lisa's orange remains the ground; cream and apricot light drift above it. */
body{isolation:isolate}
.ambient-background{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ambient-background span{position:absolute;inset:-14%;display:block;transform-origin:center;pointer-events:none}
.ambient-background span:first-child{background:radial-gradient(ellipse at 18% 22%,#fff5dce6 0%,#ffe6bf8c 30%,transparent 66%),radial-gradient(ellipse at 78% 84%,#ffd89699 0%,transparent 58%)}
.ambient-background span:nth-child(2){background:radial-gradient(ellipse at 85% 30%,#ff90276b 0%,#ffad6233 35%,transparent 68%),radial-gradient(ellipse at 28% 82%,#ffdfa980 0%,transparent 58%)}
html[data-effects=light] .ambient-background span:nth-child(2){display:none}

/* A stable action slot changes from analysis to committing the selected move. */
.actions #hint{flex:1;max-width:190px;min-width:0;white-space:nowrap;overflow:hidden;transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .2s ease}
#hint span{display:inline-block;pointer-events:none}
.actions #hint[data-action=play]{background:linear-gradient(125deg,#f6ecd6,#e6cea0);border-color:#b89b6699;color:#5f492c;box-shadow:inset 0 1px #fffaf0b3,0 3px 10px #845d2420}
.actions #hint[data-action=playing]{background:#ead9b8;color:#786141}
@media(max-width:600px){.actions button{padding-inline:12px}.actions #hint{padding-inline:9px;font-size:11px}}

/* Board backgrounds < hint arrows < every piece, including unmoving pieces. */
#board .hint-arrow-layer{z-index:1}
#board .piece{z-index:3}
/* The evaluation rail occupies the same reserved island space. */
.island-evaluation{display:none;flex:1;min-width:0;flex-direction:column;gap:5px;text-align:left}
.island[data-evaluation=true]:not(.expanded) .island-copy{display:none}
.island[data-evaluation=true]:not(.expanded) .island-evaluation{display:flex;animation:eval-reveal .28s ease-out}
.island[data-evaluation=true]:not(.expanded) .thinking-bars{display:none!important}
.eval-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#695439;line-height:1.2}
.eval-heading b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:#4e3c27}
.eval-track{position:relative;display:block;height:8px;overflow:hidden;border-radius:5px;background:#715842;box-shadow:inset 0 1px 2px #45302030}
.eval-track #evalWhite{position:absolute;inset:0;background:linear-gradient(90deg,#fffaf0,#f1ddaf);transform:scaleX(.5);transform-origin:left;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.eval-mid{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#b48c4f99}
.eval-detail{font-size:8px;line-height:1.1;color:#786449;white-space:nowrap}
@keyframes eval-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.eval-track #evalWhite{transition:none}.island-evaluation{animation:none!important}}
.reduce-motion .eval-track #evalWhite{transition:none}

/* Mobile smoothness: retain pearl surfaces without sampling the moving backdrop. */
html[data-effects=light] header,html[data-effects=light] .panel,html[data-effects=light] .board-shell,html[data-effects=light] .island,html[data-effects=light] dialog{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-effects=light] .panel::after,html[data-effects=light] .board-shell::after{display:none}
html[data-effects=light] .board-shell{background:linear-gradient(135deg,#c89465,#8b5b3d)}
html[data-effects=light] .panel{--panel-top:#fff8eb;--panel-bottom:#ffedda}
html[data-effects=light] .search-panel{--panel-top:#eff7f7;--panel-bottom:#d5e7ed}
html[data-effects=light] .history-panel{--panel-top:#fff1ea;--panel-bottom:#efd0c5}
html[data-effects=light] .analysis-panel{--panel-top:#fff9e0;--panel-bottom:#ffe3a6}

html[data-effects=light] #board .square.selected .piece{filter:none;transform:translateY(-2px) scale(1.025)}

/* Android 1.1.1: a single stationary checkerboard, independent of hint layers. */
#board{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(8,minmax(0,1fr));background:conic-gradient(from 90deg,#fff0d0 25%,#ba9176 0 50%,#fff0d0 0 75%,#ba9176 0);background-size:25% 25%;overflow:visible;contain:layout style}
#board .board-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));min-width:0;min-height:0;width:100%;height:100%;flex:none}
#board .square{aspect-ratio:auto;min-width:0;min-height:0;width:100%;height:100%;background:transparent;filter:none!important;transition:none}
#board .square.dark-square{background:transparent}
#board .square.last{background:#f8dfa0}
#board .square.dark-square.last{background:#dfb86d}
#board .square.selected{background:var(--gold-soft)}
#board .square:hover::after{display:none}
#board .piece{transition:none!important;filter:none!important}
#board .square.selected .piece{transform:none!important}
#board .hint-arrow-layer{transform:translateZ(0);contain:paint}
.actions button:disabled{opacity:1;color:#a28b70}
.actions .primary:disabled{color:#fff1dd}

/* Evaluation bar stays White on the light segment and Black on the dark segment. */

/* APK backdrop is one opaque native window canvas, independent of document height. */
html.native-backdrop,html.native-backdrop body{background:transparent!important}