/* Compact shell around the site's original game.css, card renderer and controls. */
:root { --felt: #287027; --deep: #205b24; --gold: #f0dfa0; --ink: #fffdf4; }
:root[data-theme=navy] { --felt: #204b63; --deep: #173747; }
:root[data-theme=burgundy] { --felt: #733943; --deep: #522a34; }
html,body { width:100%;height:100%;min-width:280px;min-height:440px;overflow:hidden;background:var(--felt); }
html.extension-popup,html.extension-popup body { width:720px;height:600px; }
.surface { display:grid;grid-template-rows:58px 38px minmax(0,1fr) 54px 24px 38px;height:100vh;height:100dvh;min-height:440px;background:var(--felt); }
.surface-header { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 18px;background:var(--deep);border-bottom:1px solid #ffffff20; }
.surface-brand { display:flex;align-items:center;gap:8px;color:var(--ink); }
.surface-brand img { width:30px;height:31px; }
.surface-brand h1 { font:600 17px var(--game-menu-font);margin:0; }
.surface-brand p { font-size:9px;letter-spacing:1px;color:var(--gold);margin-top:2px; }
.surface .hud { margin:0;gap:14px; }
.surface .hud-item { min-width:34px; }
.surface .hud-label { font-size:8px; }
.surface .hud-value { font-size:14px; }
.surface-options { display:flex;align-items:center;justify-content:space-between;padding:4px 18px;gap:12px; }
.surface-options .toggle-btn { padding:5px 10px;font-size:10px; }
.surface-options .toggle-btn.active { background:var(--gold);color:#284228; }
.surface-options > span { font-size:10px;color:#e4edd9; }
.surface-options button#help { width:25px;height:25px;border-radius:50%;border:1px solid #ffffff55;color:var(--ink);background:transparent;cursor:pointer; }
.surface #board { width:100%;max-width:950px;min-height:0;margin:0 auto;flex:none; }
.surface .home-toolbar { display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px; }
.surface .home-toolbar .ctl-btn { display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;min-height:38px;font-size:12px; }
.surface .home-toolbar .control-icon { width:16px;height:16px; }
.surface .home-toolbar #btn-new { order:0; }
.surface .home-toolbar #btn-hint { order:1; }
.surface .home-toolbar #btn-undo { order:2; }
.surface .home-toolbar #btn-restart { order:3; }
.surface .home-toolbar #btn-sound { order:4; }
.surface .sound-slash { display:none; }
.surface #btn-sound.muted .sound-waves { display:none; }
.surface #btn-sound.muted .sound-slash { display:block; }
.surface #btn-auto { position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:11px;padding:8px 12px; }
#save-status { margin:0;text-align:center;padding:3px 10px;font-size:9px;line-height:1.4;color:#dce9d1; }
#save-status.storage-warning { color:#ffecad; }
.surface-footer { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px;background:var(--deep);border-top:1px solid #ffffff20;font-size:10px; }
.surface-footer a { color:var(--gold);text-underline-offset:3px; }
.surface-footer .full-game { text-decoration:none;background:var(--gold);color:#284228;border-radius:5px;padding:5px 9px;font-weight:700;white-space:nowrap; }
.surface a:focus-visible,.surface button:focus-visible { outline:3px solid #ffe7aa;outline-offset:2px; }
.surface-help { width:min(430px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;overflow:auto;padding:25px;color:var(--ink);background:var(--deep);border:1px solid #f0dfa066;border-radius:12px; }
.surface-help::backdrop { background:#092714b5; }
.surface-help h2 { font:27px Georgia,serif;margin:10px 0 18px; }
.surface-help p,.surface-help li { font-size:12px;line-height:1.7;margin:10px 0; }
.surface-help ul { padding-left:18px; }
.surface-help button { margin-top:14px;padding:10px 18px;cursor:pointer;background:var(--gold);color:#254724;border:0;border-radius:6px; }
.surface-help .close { float:right;margin:0;padding:2px 9px;background:transparent;color:var(--ink);font-size:24px; }
.win-overlay .win-card { max-width:calc(100% - 28px);max-height:calc(100% - 28px);overflow:auto; }
.noscript { position:fixed;inset:80px 20px auto;padding:20px;background:var(--deep); }
@media(max-width:480px) {
 .surface { grid-template-rows:55px 36px minmax(0,1fr) 52px 28px 38px; }
 .surface-header { padding:7px 10px;gap:8px; }.surface-brand img { width:24px;height:25px; }.surface-brand h1 { font-size:13px; }.surface-brand p { font-size:7px;letter-spacing:.6px; }
 .surface .hud { gap:7px; }.surface .hud-item { min-width:23px; }.surface .hud-value { font-size:12px; }.surface .hud-label { font-size:7px;letter-spacing:0; }
 .surface-options { padding:4px 10px;gap:8px; }.surface-options > span { font-size:8px; }.surface-options .toggle-btn { font-size:9px;padding:5px 8px; }
 .surface.home-game-layout .home-toolbar { gap:5px;padding:6px 8px; }
 .surface.home-game-layout .home-toolbar .ctl-btn { padding:6px 7px;min-width:0;min-height:38px;gap:4px;font-size:10px; }
 .surface .home-toolbar .control-icon { display:none; }.surface .home-toolbar #btn-sound .control-icon { display:block; }.surface .home-toolbar #btn-sound .control-label { display:none; }
 .surface-footer { padding:6px 9px;font-size:9px; }
 #save-status { font-size:8px; }
}
/* Keep the original back-face rotation while the site's deal animation runs. */
.surface .card.dealt:not(.faceup) .card-inner { animation: none; }