/* Spielzimmer: Raum mit Holzregal und Spielschachteln (3D) */
#shelf { padding: 0; color: #3a2410; --floor: 120px;
  background:
    radial-gradient(ellipse 55% 38% at 50% 6%, rgba(255,226,150,.55), transparent 72%) local,
    repeating-linear-gradient(90deg, rgba(120,70,20,.07) 0 2px, transparent 2px 38px) local,
    linear-gradient(#e2cfa6 0, #d3b988 calc(100% - var(--floor) - 14px), #8d6a3a calc(100% - var(--floor) - 14px), #6e4f27 calc(100% - var(--floor)), transparent calc(100% - var(--floor))) local,
    repeating-linear-gradient(90deg, #8a5a2b 0 70px, #744a21 70px 72px) local, #8a5a2b;
}
#shelf::before { display: none; }
#shelf > .wrap { max-width: 1000px; padding: max(14px, env(safe-area-inset-top)) 12px 0; gap: 0; min-height: 100%; }
#shelf .room-head { text-align: center; padding: 4px 0 14px; }
#shelf .room-head h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.3rem); letter-spacing: -.03em; color: #4a2c12; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
#shelf .room-head p { margin: 4px 0 0; color: #7a5a38; font-size: .95rem; }
#shelf .wall { display: none; }

/* Regal: Seitenwände, Rückwand, Bretter */
.shelf-case { position: relative; padding: 0 16px; background: linear-gradient(90deg, #6e4220, #8c5a2c 14%, #8c5a2c 86%, #6e4220); border-radius: 6px 6px 0 0; box-shadow: 0 18px 30px rgba(50,25,5,.4); }
.shelf-case::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px), repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 11px); }
.crown { height: 16px; margin: 0 -8px; background: linear-gradient(#a26a34, #7a4a22); border-radius: 4px 4px 0 0; box-shadow: 0 3px 5px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,220,160,.35); position: relative; z-index: 3; }
.shelf-back { position: relative; background: repeating-linear-gradient(90deg, #4b2c12 0 60px, #3f2410 60px 62px); box-shadow: inset 0 14px 18px rgba(0,0,0,.45), inset 10px 0 14px rgba(0,0,0,.3), inset -10px 0 14px rgba(0,0,0,.3); }
.plinth { height: 18px; margin: 0 -4px; background: linear-gradient(#7a4a22, #5a3416); box-shadow: 0 6px 8px rgba(0,0,0,.4); border-radius: 0 0 3px 3px; position: relative; z-index: 3; }
.srow { position: relative; padding-top: 14px; }
.sslots { --w: min(150px, calc((100vw - 110px) / var(--n, 4) * .78)); display: flex; justify-content: space-evenly; align-items: flex-end; gap: 8px; min-height: calc(var(--w) * 1.5 + 14px); padding: 0 6px; }
.sboard { position: relative; z-index: 2; height: 15px; margin: 0 -16px; background: linear-gradient(#b88346 0, #a06a34 30%, #7a4a22); box-shadow: 0 6px 10px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,225,170,.45); }
.sboard::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px); }

/* Boden und Teppich */
.floor { height: var(--floor); position: relative; display: flex; justify-content: center; align-items: center; }
.rug { width: min(78%, 640px); height: 62%; border-radius: 50%; margin-top: 6px; background: radial-gradient(ellipse at center, #21705f, #144b40 70%); box-shadow: 0 0 0 4px #c9972a, 0 0 0 8px #144b40, 0 8px 12px rgba(0,0,0,.35); }

/* Schachtel in 3D */
.gbox { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: var(--w); height: calc(var(--w) * var(--ar)); perspective: 800px; -webkit-tap-highlight-color: transparent; --d: calc(var(--w) * .2); margin-right: calc(var(--d) * .6); }
.gbox:focus-visible .gb-front { outline: 3px solid var(--gold); }
.gb-shadow { position: absolute; left: 4%; right: -22%; bottom: -3px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(4px); }
.gb-in { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transform-origin: left bottom; transform: rotateY(-24deg); transition: transform .3s; }
.gbox:hover .gb-in, .gbox:focus-visible .gb-in { transform: translateY(-9px) rotateY(-10deg); }
.gb-front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 7% 6% 5%; border-radius: 3px; overflow: hidden; color: #fff;
  background: linear-gradient(165deg, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 calc(var(--w) * .025) rgba(255,255,255,.88), inset 0 0 0 calc(var(--w) * .035) rgba(0,0,0,.18); }
.gb-front::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(120% 60% at 30% 0, rgba(255,255,255,.3), transparent 60%); pointer-events: none; }
.gb-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.34) 0 10%, transparent 26%, transparent 70%, rgba(0,0,0,.2)); pointer-events: none; }
.gb-title { position: relative; z-index: 1; margin-top: 8%; font-weight: 800; font-size: calc(var(--w) * .165); line-height: 1; letter-spacing: -.03em; text-align: center; text-shadow: 0 calc(var(--w) * .015) 0 rgba(0,0,0,.4), 0 0 calc(var(--w) * .06) rgba(0,0,0,.35); }
.gb-art { position: relative; z-index: 1; width: 92%; flex: 1; display: grid; place-items: center; min-height: 0; }
.gb-art svg { width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--w) * .02) calc(var(--w) * .02) rgba(0,0,0,.45)); }
.gb-foot { position: relative; z-index: 1; align-self: stretch; margin: 0 -6% -5%; padding: calc(var(--w) * .035) 4%; text-align: center; font-weight: 700; font-size: calc(var(--w) * .075); letter-spacing: .02em; background: rgba(0,0,0,.38); box-shadow: 0 -1px 0 rgba(255,255,255,.3); }
.gb-side { position: absolute; left: 100%; top: 0; width: var(--d); height: 100%; transform-origin: left center; transform: rotateY(90deg); background: linear-gradient(90deg, var(--c2), var(--c1) 160%); filter: brightness(.68); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 calc(var(--w) * .02) rgba(255,255,255,.5); }
.gb-side i { font: 800 calc(var(--w) * .1)/1 var(--font); font-style: normal; color: #fff; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.gb-lid { position: absolute; z-index: 2; left: 0; width: 100%; top: -1px; height: 7%; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); border-bottom: 1px solid rgba(0,0,0,.3); border-radius: 3px 3px 0 0; transform-origin: top center; pointer-events: none; }

/* Öffnen: Schachtel kommt nach vorn, dreht sich frontal, Deckel klappt auf */
.gbox.opening { z-index: 30; }
.gbox.opening .gb-in { animation: boxpull .26s ease-out forwards; }
.gbox.opening .gb-lid { background: none; }
@keyframes boxpull { 0% { transform: rotateY(-24deg); } 100% { transform: translateY(-14px) rotateY(0) scale(1.18); } }

#gameView { position: fixed; inset: 0; z-index: 50; background: #0a2a25; display: flex; flex-direction: column; animation: gvin .3s ease-out; }
#gameView[hidden] { display: none; }
@keyframes gvin { from { opacity: 0; transform: scale(.96); } }
#gameView .gbar { display: flex; align-items: center; gap: 10px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; color: #f3e8d0; }
#gameView .gbar button { padding: 8px 14px; border-radius: 99px; border: 0; font: 700 .95rem/1 inherit; background: #f3e8d0; color: #3a2410; cursor: pointer; }
#gameView .gbar b { font-size: 1rem; }
#gameFrame { flex: 1; width: 100%; border: 0; background: #0a2a25; }
@media (prefers-reduced-motion: reduce) { .gbox.opening .gb-in { animation: none; opacity: 0; } .gb-in { transition: none; } }

/* Profil-Leiste im Spielzimmer */
.shelf-me { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 8px; background: rgba(30,18,8,.55); border: 1px solid rgba(255,220,160,.25); border-radius: 16px; backdrop-filter: blur(6px); }
.shelf-me input { flex: 1; min-width: 0; font-weight: 700; background: rgba(255,255,255,.12); color: #fff4dc; border: 1px solid rgba(255,220,160,.3); border-radius: 12px; padding: 9px 12px; }
.shelf-me input::placeholder { color: rgba(255,244,220,.5); }
.pill-btn { flex: none; position: relative; padding: 9px 14px; border-radius: 12px; font-weight: 700; color: #3a2a05; background: linear-gradient(#ffe08a, #e8b730); border: 1px solid #c9972a; box-shadow: 0 2px 0 #9a7010; cursor: pointer; }
.pill-btn[hidden] { display: none; }
.pill-btn .nbadge { margin-left: 6px; }
#gameView .gbar { display: none; } /* jedes Spiel hat seine eigene einheitliche Kopfleiste (spiele/menu.js) */

.head-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#boardDlg { width: min(94vw, 460px); max-height: 92dvh; overflow-y: auto; }
#boardDlg .tabs .seg { flex-wrap: wrap; }
#boardDlg .rows { display: grid; gap: 6px; margin: 10px 0; text-align: left; }
#boardDlg .lrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.08); font-weight: 700; }
#boardDlg .lrow.me { box-shadow: inset 0 0 0 2px #e8b730; }
#boardDlg .lrow .rk { width: 1.8em; text-align: center; flex: none; }
#boardDlg .lrow .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#boardDlg .lrow b { font-variant-numeric: tabular-nums; }
#boardDlg .lrow small { opacity: .65; font-weight: 600; display: block; font-size: .75rem; }