[data-playroom]{--ink: #2f3135;--muted: #6f7379;--blue: #668c9a;--blue-soft: #b5ebeb;--green: #a58d42;--green-soft: #ffee8c;--orange: #c79a61;--orange-soft: #fff1cb;--red: #d78390;--red-soft: #ffc2ca;--inactive: #d5d4cd;--tool-ink: #462e31;display:grid;gap:1rem;color:var(--ink)}[data-playroom] .playroom-intro{padding:.3rem .15rem}[data-playroom] .playroom-intro p{margin:0}[data-playroom] .playroom-intro p:last-child{margin-top:.25rem;color:var(--muted);font-size:.84rem;line-height:1.65}[data-playroom] .eyebrow,[data-playroom] .section-kicker{margin:0;color:#a35d38;font-size:.62rem;font-weight:900;letter-spacing:.17em}[data-playroom] .canvas-section{padding:.85rem 0 1rem}[data-playroom] .canvas-toolbar,[data-playroom] .warehouse-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 .25rem}[data-playroom] .toolbar-actions{display:flex;align-items:center;gap:.5rem}[data-playroom] h2{margin:.08rem 0 0;color:var(--ink);font-size:1rem}[data-playroom] .title-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}[data-playroom] .view-link{display:inline-grid;place-items:center;min-height:30px;padding:0 .58rem;border:1px solid #d8d8d8;border-radius:9px;background:#fff;color:var(--ink);font-size:.74rem;font-weight:800;text-decoration:none}[data-playroom] .quiet-button,[data-playroom] .mode-button,[data-playroom] .wild-button{min-height:40px;border:1px solid #d8d8d8;border-radius:9px;background:#fff;color:var(--ink);font-size:.74rem;font-weight:800;cursor:pointer}[data-playroom] .quiet-button,[data-playroom] .mode-button{padding:0 .72rem}[data-playroom] .mode-button[aria-pressed=true]{border-color:#be6657;background:#fff0e9;color:#9d4739;box-shadow:inset 0 0 0 1px #be6657}[data-playroom] .target-bar{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .65rem;margin:.65rem .25rem 0;font-size:.74rem}[data-playroom] .target-bar strong{color:#b0524c}[data-playroom] .target-bar span{color:var(--muted)}[data-playroom] .board-status{min-height:1.35em;margin:.25rem .25rem 0;color:#a35d38;font-size:.75rem;font-weight:800}[data-playroom] .board-status[data-tone=error]{color:#b23b2e}[data-playroom] .canvas-stage{display:grid;place-items:center;margin-top:.25rem;overflow:hidden}[data-playroom] .board-canvas{width:min(94vw,720px);aspect-ratio:1;display:block;position:relative;background:#d2edc0;border:1px solid #777;box-shadow:0 3px 12px #1e222814;user-select:none}[data-playroom] .board-cell{position:absolute;display:grid;place-items:center;cursor:pointer;background:#fff;box-shadow:inset 0 0 0 .7px currentColor}[data-playroom] .zone-hand{color:var(--green);background:var(--green-soft)}[data-playroom] .zone-river,[data-playroom] .zone-dora{color:var(--blue);background:var(--blue-soft)}[data-playroom] .zone-meld{color:var(--orange);background:var(--orange-soft)}[data-playroom] .zone-reserve{color:var(--red);background:var(--red-soft)}[data-playroom] .board-cell.is-inactive{color:#8e8b84;background:var(--inactive)}[data-playroom] .board-cell.is-overstock{z-index:2;box-shadow:inset 0 0 0 3px #d83a31}[data-playroom] .board-cell.selected{z-index:1;box-shadow:inset 0 0 0 2px #d78390,inset 0 0 0 3px #fffaf2}[data-playroom] .board-cell.is-drop-target{z-index:2;box-shadow:inset 0 0 0 3px #cf4b43;background:#fff1cb}[data-playroom] .board-tile{position:relative;width:92%;height:92%;padding:0;border:0;background:transparent;display:grid;place-items:center;overflow:visible;cursor:grab;line-height:0}[data-playroom] .board-tile{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}[data-playroom] .board-tile.is-touch-dragging{z-index:8;transform:scale(1.12);filter:drop-shadow(0 5px 5px rgba(0,0,0,.28))}[data-playroom] .board-tile img{position:absolute;left:50%;top:50%;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}[data-playroom] .board-tile img.is-side{width:73.333%;height:136.364%}[data-playroom] .board-tile span{display:grid;place-items:center;width:86%;aspect-ratio:1;border-radius:3px;background:#f3eee4;color:var(--tool-ink);font-size:clamp(.42rem,2.5vw,1rem);font-weight:900}[data-playroom] .mark-tsumogiri .board-tile:after,[data-playroom] .mark-called .board-tile:after{content:"";position:absolute;inset:0;z-index:1;border-radius:2px;pointer-events:none}[data-playroom] .mark-tsumogiri .board-tile:after{background:#d5d4cdad}[data-playroom] .mark-called .board-tile:after{background:#ffc2ca9e;box-shadow:inset 0 0 0 2px #d67e88e6}[data-playroom] .board-tile .meld-star{position:absolute;right:-12%;bottom:-13%;z-index:2;display:block;width:auto;aspect-ratio:auto;border-radius:0;background:transparent;color:var(--tool-ink);font-size:clamp(.5rem,2vw,1.05rem);line-height:1;text-shadow:0 1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff}[data-playroom] .quick-palette{min-width:0;padding:.8rem;border:1px solid rgba(105,72,38,.18);border-radius:14px;background:#fffaf0}[data-playroom] .palette-head{display:flex;align-items:end;justify-content:space-between;gap:.75rem;margin-bottom:.55rem}[data-playroom] .palette-head span{color:var(--muted);font-size:.7rem}[data-playroom] .palette-track{display:flex;width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;touch-action:pan-x}[data-playroom] .palette-panel{flex:0 0 100%;min-width:0;padding:.25rem;scroll-snap-align:start}[data-playroom] .palette-panel>strong{display:block;margin-bottom:.35rem;color:#80563b;font-size:.72rem}[data-playroom] .palette-colors{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}[data-playroom] .palette-color{position:relative;min-width:0;padding:2px;border:1px solid #d5d0c7;border-radius:5px;background:#fff;cursor:pointer}[data-playroom] .palette-color img{display:block;width:100%;aspect-ratio:66/90;object-fit:contain}[data-playroom] .palette-color.is-empty img{opacity:.38;filter:grayscale(.7)}[data-playroom] .palette-count{position:absolute;right:1px;bottom:1px;z-index:1;display:grid;place-items:center;min-width:1.15em;height:1.15em;padding:0 2px;border-radius:999px;background:#2c2f34d1;color:#fff;font-size:.55rem;font-weight:900}[data-playroom] .palette-question{display:grid;place-items:center;aspect-ratio:66/90;color:var(--tool-ink);font-size:clamp(1rem,4vw,1.55rem);font-weight:900}[data-playroom] .warehouse{padding:1rem;border-radius:16px;background:linear-gradient(180deg,#f5ead8,#e8d4b7);box-shadow:inset 0 0 0 1px #69482629,0 5px 18px #46301b12}[data-playroom] .warehouse-head{padding:0 0 .75rem}[data-playroom] .wild-button{display:flex;align-items:center;gap:.42rem;padding:.25rem .62rem}[data-playroom] .wild-face{display:grid;place-items:center;width:27px;aspect-ratio:66/90;border-radius:4px;background:#f3eee5;color:var(--tool-ink);font-size:1rem;box-shadow:0 2px 3px #2d1f122e}[data-playroom] .shelf-list{display:grid;gap:.72rem}[data-playroom] .suit-shelf{--box-front: #ffc2ca;--box-top: #ffe1e5;--box-side: #d78390;display:block;border:1px solid rgba(105,72,38,.2);border-radius:11px;overflow:hidden;background:#fffbf29e}[data-playroom] .suit-shelf[data-suit=p]{--box-front: #7ba6c4;--box-top: #aac8dc;--box-side: #557f9b}[data-playroom] .suit-shelf[data-suit=s]{--box-front: #d2edc0;--box-top: #e8f7dd;--box-side: #9ebd89}[data-playroom] .suit-shelf[data-suit=z]{--box-front: #dad6ff;--box-top: #eeebff;--box-side: #aaa5dc}[data-playroom] .rack{display:grid;gap:2px;min-width:0;padding:.6rem .25rem .7rem;background:linear-gradient(180deg,transparent calc(100% - 8px),rgba(100,63,29,.28) calc(100% - 8px)),repeating-linear-gradient(90deg,rgba(92,61,31,.045) 0 1px,transparent 1px 11.111%)}[data-playroom] .stock-column{min-width:0;display:grid;grid-template-rows:auto 1fr;gap:.35rem}[data-playroom] .stock-column.is-empty .tile-label{opacity:.38;filter:grayscale(.55)}[data-playroom] .tile-label{width:100%;padding:0;border:0;background:transparent;cursor:pointer;line-height:0}[data-playroom] .tile-label img{display:block;width:min(100%,34px);height:auto;margin:0 auto;filter:drop-shadow(0 1px 1px rgba(45,31,18,.18))}[data-playroom] .box-levels{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:5px 4px 4px 1px}[data-playroom] .stock-box,[data-playroom] .box-hole{display:block;position:relative;width:calc(100% - 4px);height:clamp(15px,4.6vw,23px);border-radius:2px}[data-playroom] .stock-box{padding:0;border:0;background:linear-gradient(180deg,var(--box-top) 0 28%,var(--box-front) 28% 100%);box-shadow:inset 0 -2px #45251226,0 2px 2px #41271433;cursor:grab}[data-playroom] .stock-box:before{content:"";position:absolute;top:-4px;left:4px;right:-1px;height:5px;border-radius:2px 2px 0 0;background:var(--box-top);transform:skew(-34deg);transform-origin:bottom left}[data-playroom] .stock-box:after{content:"";position:absolute;top:1px;right:-4px;width:5px;height:calc(100% - 1px);background:var(--box-side);transform:skewY(-42deg);transform-origin:top left;border-radius:0 2px 2px 0}[data-playroom] .stock-box.is-red{--box-front: #d78390;--box-top: #ffc2ca;--box-side: #ad5e69}[data-playroom] .box-face-mark{position:relative;z-index:1;display:grid;place-items:center;height:100%;color:#ffffffe0;font-size:.52rem;font-weight:900}[data-playroom] .box-hole{background:#4f34191f;box-shadow:inset 2px 2px 4px #432a1338,inset -1px -1px #ffffff42}[data-playroom] button.box-hole{padding:0;border:0}@media(max-width:560px){[data-playroom] .canvas-toolbar{align-items:flex-start}[data-playroom] .toolbar-actions{flex-direction:column;align-items:stretch;gap:.35rem}[data-playroom] .quiet-button,[data-playroom] .mode-button{min-height:36px;padding:0 .5rem}}@media(min-width:760px){[data-playroom] .stock-box,[data-playroom] .box-hole{height:23px}}