:root{--gold:#865020;--orange:#865020}
body{background:#fffdfb;color:var(--ink)}
.topbar{min-height:88px;background:#fffdfbf2;border-bottom:1px solid var(--line)}
.brand{gap:14px}
.brand-logo{width:58px;height:58px;object-fit:cover;border-radius:16px;clip-path:none;filter:none;box-shadow:0 3px 10px #5b3c2526}
.sound-btn{white-space:nowrap}
.canvas-wrap,.canvas-wrap canvas{min-height:0}
.canvas-wrap{width:100%;overflow:hidden;background:#f3d6a6;background-image:repeating-linear-gradient(0deg,#f3d6a6 0,#f3d6a6 14px,#efd09c 15px,#f6dfb7 18px)}
.canvas-wrap canvas{width:100%;height:100%;display:block}
.hero{color:var(--ink)}
.toolbar,.card{background:#fffdf9;border-color:var(--line)}
@media(max-width:800px){
  .hero{display:block}
  .shell{padding:14px}
  .topbar{min-height:62px}
  .toolbar{gap:8px;padding:8px;margin-bottom:8px}
  .game-card{padding:6px}
}
@media(max-width:520px){
  .toolbar .btn{padding:8px 10px}
  .toolbar .stats{gap:10px}
  .toolbar .stat{min-width:0}
}
html:fullscreen{width:100%;height:100%;overflow:hidden;background:#fffdfb}
html:fullscreen body{height:100%;overflow:hidden;background:#fffdfb}
html:fullscreen .topbar{height:62px;min-height:62px;position:relative}
html:fullscreen .shell{display:flex;flex-direction:column;width:100%;max-width:none;height:calc(100dvh - 62px);min-height:0;padding:8px}
html:fullscreen .hero,html:fullscreen .gallery-title,html:fullscreen .gallery,html:fullscreen .jigsaw-rules{display:none}
html:fullscreen .toolbar-head{flex:0 0 auto;margin-bottom:4px}html:fullscreen .toolbar{flex:0 0 auto;padding:8px;margin-bottom:8px}
html:fullscreen .game-card{flex:1 1 auto;min-height:0;padding:4px}
html:fullscreen .canvas-wrap{height:100%;min-height:0}
@media(max-width:520px){.brand-logo{width:52px;height:52px}}

/* Jigsaw catalogue layout */
@media (min-width:801px){.shell{max-width:1280px}}
.jigsaw-rules{margin:18px 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--muted)}
.jigsaw-rules summary{cursor:pointer;color:var(--ink);font-weight:800}
.jigsaw-rules ol{margin:12px 0 0;padding-left:22px;line-height:1.6}
.jigsaw-rules li+li{margin-top:6px}

/* Fullscreen fallback */
html.jigsaw-fullscreen-fallback{width:100%;height:100%;overflow:hidden}
html.jigsaw-fullscreen-fallback body{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#fffdfb}
html.jigsaw-fullscreen-fallback .topbar{height:62px;min-height:62px;position:relative}
html.jigsaw-fullscreen-fallback .shell{display:flex;flex-direction:column;width:100%;max-width:none;height:calc(100dvh - 62px);min-height:0;padding:8px}
html.jigsaw-fullscreen-fallback .hero,html.jigsaw-fullscreen-fallback .gallery-title,html.jigsaw-fullscreen-fallback .gallery,html.jigsaw-fullscreen-fallback .jigsaw-rules{display:none}
html.jigsaw-fullscreen-fallback .toolbar-head{flex:0 0 auto;margin-bottom:4px}html.jigsaw-fullscreen-fallback .toolbar{flex:0 0 auto;padding:8px;margin-bottom:8px}
html.jigsaw-fullscreen-fallback .game-card{flex:1 1 auto;min-height:0;padding:4px}
html.jigsaw-fullscreen-fallback .canvas-wrap{height:100%;min-height:0}
@media(max-width:700px){
  html:fullscreen .topbar,html.jigsaw-fullscreen-fallback .topbar{height:56px;min-height:56px;gap:8px;padding:0 10px}
  html:fullscreen .main-nav,html.jigsaw-fullscreen-fallback .main-nav{display:none}
  html:fullscreen .brand span,html.jigsaw-fullscreen-fallback .brand span{display:none}
  html:fullscreen .brand-logo,html.jigsaw-fullscreen-fallback .brand-logo{width:42px;height:42px}
  html:fullscreen .shell,html.jigsaw-fullscreen-fallback .shell{height:calc(100dvh - 56px);padding:4px}
  html:fullscreen .toolbar,html.jigsaw-fullscreen-fallback .toolbar{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  html:fullscreen .toolbar::-webkit-scrollbar,html.jigsaw-fullscreen-fallback .toolbar::-webkit-scrollbar{display:none}
  html:fullscreen .toolbar>* ,html.jigsaw-fullscreen-fallback .toolbar>*{flex-shrink:0}
  html:fullscreen .toolbar .spacer,html.jigsaw-fullscreen-fallback .toolbar .spacer{display:none}
  html:fullscreen .game-card,html.jigsaw-fullscreen-fallback .game-card{padding:2px}
}

/* BEGIN_REAL_WOOD_OVERRIDE */
.canvas-wrap{
  background:#c97f35 url("./assets/jigsaw-board-bg.png") center/cover no-repeat !important;
}

.game-card{
  max-width:none !important;
}

.shell{
  max-width:none !important;
  width:100% !important;
}

.toolbar-head,
.toolbar,
.game-card{
  width:min(96vw,1800px) !important;
}

.canvas-wrap{
  height:clamp(640px,76vh,1100px) !important;
  min-height:72vh !important;
}

html:fullscreen .canvas-wrap,
html.jigsaw-fullscreen-fallback .canvas-wrap{
  height:100% !important;
  min-height:0 !important;
}
/* END_REAL_WOOD_OVERRIDE */