/* A continuous table surface, physical racks and direct card interaction. */
.game-device{grid-template-rows:43px 61px 34px minmax(0,1fr) 184px 24px;background:#281c24;--hand-card-width:66px;--hand-card-height:104px;
  /* Shared scene scale. See ASSET_GUIDE.md before adding table props. */
  --table-prop-size:calc(var(--hand-card-width) * .88);
  --table-prop-inset:calc(var(--hand-card-width) * .36);
  --table-prop-bottom:calc(var(--hand-card-width) * .12);
  --self-hand-scale:1.667;
  --opponent-hand-scale:1.303;
}
.table-surface{position:absolute;z-index:-1;top:143px;bottom:-80px;left:7px;right:7px;border-radius:48% 48% 0 0 / 22% 22% 0 0;background:radial-gradient(ellipse at 50% 31%,var(--felt),var(--felt-edge) 85%);box-shadow:inset 0 0 40px #1c101630;overflow:hidden}
.table-surface:after{content:'';position:absolute;inset:16px 14px -25px;border:1px solid #c8a87d20;border-radius:48% 48% 0 0 / 21% 21% 0 0;pointer-events:none}
.game-device .arena{background:transparent;box-shadow:none;border-radius:0;margin:5px 7px 0;isolation:auto}
.arena>.felt-grain,.arena>.table-outline{display:none}
.game-device .home-indicator{height:24px}
.game-device .player-top{top:13px;left:50%;z-index:12}
.game-device .player-left,.game-device .player-right{top:26%;z-index:12}
.game-device .player-left{left:8px}.game-device .player-right{right:8px}
.game-device .avatar{width:36px;height:36px;font-size:17px}
.game-device .player{gap:4px}.game-device .player-score{background:#281c2455;padding:3px 7px;border-radius:10px}
.opponent-station{position:absolute;z-index:4;pointer-events:none}
.station-top{width:168px;height:70px;left:50%;top:109px;transform:translateX(-50%)}
.station-left,.station-right{width:65px;height:178px;top:calc(52% - 50px)}
.station-left{left:0}.station-right{right:0}
.game-device .opponent-cards{inset:0;left:0;top:0;right:0;bottom:0;transform:none;display:block;width:100%;height:100%;z-index:1}
.game-device .opponent-cards .back-card{position:absolute;width:38px;height:57px;margin:0;left:calc(50% + var(--offset) - 19px);top:5px;border:1px solid #d1b698;border-radius:4px;background-color:var(--back);background-image:repeating-linear-gradient(45deg,transparent 0 5px,#ceb58b26 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#ceb58b10 5px 6px);box-shadow:-2px 2px 4px #190f2040;transform:rotate(var(--angle));transition:top .4s,left .4s,transform .4s;z-index:var(--layer)}
.game-device .back-card:after{content:'';position:absolute;inset:3px;border:1px solid var(--back-line);opacity:.4;border-radius:2px}
.game-device .station-left .back-card{left:10px;top:calc(50% + var(--offset) - 28.5px);transform:rotate(calc(90deg + var(--angle)))}
.game-device .station-right .back-card{left:17px;top:calc(50% + var(--offset) - 28.5px);transform:rotate(calc(-90deg + var(--angle)))}
.game-device .card-count{right:auto;left:50%;bottom:-16px;width:23px;height:23px;font-size:10px;transform:translateX(-50%);z-index:16;background:#2b2028;border:1px solid #b9a38a55;box-shadow:0 3px 8px #130c2430}
.game-device .station-left .card-count{left:39px;bottom:-4px}.game-device .station-right .card-count{left:25px;bottom:-4px}
.game-device .station-top .card-count{left:calc(50% + 56px)}
.moving-hand{position:absolute;z-index:51;object-fit:contain;width:86px;height:129px;pointer-events:none;filter:drop-shadow(2px 5px 4px #1a102344);mask-image:linear-gradient(to top,transparent 0%,#000 12%,#000 100%)}
.game-device .trick{top:55%;z-index:7}
.game-device .trick>.playing-card{width:var(--hand-card-width);height:var(--hand-card-height)}
.game-device .trick .card-corner{font-size:20px;left:6px;top:6px}
.game-device .trick .card-corner small{font-size:15px}
.game-device .trick .card-corner.bottom{left:auto;top:auto;right:6px;bottom:6px}
.game-device .trick .card-suit{font-size:30px;left:58%;top:59%}
.game-device .table-monogram{top:52%;color:#dfbc9322}
.game-device .table-coaster{right:58px;top:18%;transform:rotate(15deg) scale(.8)}
.game-device .self-player{bottom:8px;z-index:11}
.game-device .trick-message{top:77%;z-index:16}
.game-device .hand-zone{background:transparent;padding-top:13px;z-index:10;isolation:isolate;overflow:visible}
.game-device .turn-status{margin:0 23px;position:relative;z-index:7;font-size:11px}
.game-device .hand-hint{font-size:9px}
.game-device .cards-fan{left:13px;right:13px;bottom:29px;height:115px;padding-top:14px;z-index:4}
.game-device .hand-card{width:var(--hand-card-width);height:var(--hand-card-height);left:calc(50% + var(--offset) - var(--hand-card-width) / 2);transform-origin:50% 180%;touch-action:manipulation;transition:transform .35s,filter .2s}
.game-device .hand-card .card-corner{font-size:20px;left:6px;top:6px}.game-device .hand-card .card-corner small{font-size:15px}
.game-device .hand-card .card-suit{font-size:30px;left:58%;top:59%}
.game-device .hand-card.selected{transform:translateY(calc(var(--drop) - 22px)) rotate(var(--angle));z-index:var(--layer)}
.game-device .hand-card.selected .playing-card{box-shadow:0 0 0 2px #f18a69,0 9px 15px #21122255}
.game-device.hide-hands .moving-hand{visibility:hidden}
.game-device.gold-jewelry .moving-hand[data-seat=bottom]{filter:sepia(.3) saturate(1.2)}
.gesture-hint{position:absolute;bottom:0;left:12px;right:12px;margin:0;font-size:8px;line-height:1.4;color:#c2a99a;text-align:center;z-index:8;pointer-events:none}
.game-device .trick:has(.in-flight){z-index:50}
.trick>.playing-card{z-index:1}
.trick .in-flight{z-index:5;pointer-events:none}
.trick .playing-card.joker-under{z-index:0}
.trick .joker-under:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#fff9 0%,#fff2 12%,#62462730 27%,transparent 48%);opacity:0;transition:opacity .18s}
.trick .joker-under.is-curling:after{opacity:1}
.trick .face-down{background-color:var(--back);background-image:repeating-linear-gradient(45deg,transparent 0 5px,#ceb58b26 5px 6px),repeating-linear-gradient(-45deg,transparent 0 5px,#ceb58b10 5px 6px);border-color:#d1b698}
.trick .face-down>*{visibility:hidden}
.tempo-options{display:flex;gap:7px;margin:12px 0 17px}.tempo-options button{flex:1;background:#eae2d6;border:1px solid transparent;border-radius:10px;padding:12px 6px;font-size:10px;min-height:44px}.tempo-options .active{border-color:#957361;background:#dfd0bd}
.compact .game-device{grid-template-rows:36px 51px 27px minmax(0,1fr) 155px 20px;--hand-card-width:62px;--hand-card-height:94px}
.compact .table-surface{top:119px}
.compact .game-device .player-top{top:6px}.compact .game-device .avatar{width:31px;height:31px;font-size:15px}
.compact .station-top{top:86px;width:146px}.compact .station-left,.compact .station-right{height:144px;top:calc(51% - 33px)}
.compact .game-device .opponent-cards .back-card{width:34px;height:51px}
.compact .game-device .trick{top:58%;transform:translate(-50%,-50%)}
.compact .game-device .player-left,.compact .game-device .player-right{top:26%}
.compact .game-device .hand-zone{padding-top:6px}.compact .game-device .cards-fan{bottom:23px;height:104px}
.compact .game-device .hand-card{height:94px;width:62px;left:calc(50% + var(--offset) - 31px)}
.compact .game-device .self-player{bottom:3px}
.compact .game-device .table-coaster{right:46px;top:14%}
@media(max-width:500px){.game-device{grid-template-rows:43px 61px 34px minmax(0,1fr) 184px 24px;height:100dvh}.table-surface{left:-9px;right:-9px}.game-device .arena{margin-left:7px;margin-right:7px}.game-device .home-indicator{height:24px}body:has(.concept-grid[data-view=game]) .presentation-toolbar,body:has(.concept-grid[data-view=overview]) .presentation-toolbar{display:none}}
@media(max-width:500px) and (max-height:780px){
  .game-device{grid-template-rows:36px 51px 27px minmax(0,1fr) 155px 20px;--hand-card-width:62px;--hand-card-height:94px}.table-surface{top:119px}
  .game-device .player-top{top:6px}.game-device .avatar{width:31px;height:31px;font-size:15px}
  .station-top{top:86px;width:146px}.station-left,.station-right{height:144px;top:calc(51% - 33px)}
  .game-device .opponent-cards .back-card{width:34px;height:51px}.game-device .trick{top:58%;transform:translate(-50%,-50%)}
  .game-device .player-left,.game-device .player-right{top:26%}.game-device .hand-zone{padding-top:6px}
  .game-device .cards-fan{bottom:23px;height:104px}.game-device .hand-card{height:94px;width:62px;left:calc(50% + var(--offset) - 31px)}
  .game-device .self-player{bottom:3px}
  .game-device .table-coaster{right:46px;top:14%}
}
@media(prefers-reduced-motion:reduce){.opponent-cards .back-card,.trick .joker-under:after{transition:none!important}}
/* Photographic coffee prop and item-owned reaction. */
.game-device .table-cup{left:auto;right:var(--table-prop-inset);bottom:var(--table-prop-bottom);width:var(--table-prop-size);height:var(--table-prop-size);min-width:44px;min-height:44px;padding:0;border:0;background:none;transform:none;z-index:6;cursor:pointer}
.game-device .table-cup[data-seat=top]{top:12px;bottom:auto;left:calc(50% - var(--hand-card-width) * 1.5);right:auto}
.game-device .table-cup[data-seat=left]{left:8px;right:auto;top:calc(26% - var(--table-prop-size) - 8px);bottom:auto}
.game-device .table-cup[data-seat=right]{right:8px;top:calc(26% - var(--table-prop-size) - 8px);bottom:auto}
.table-cup[data-seat=top] img{transform:rotate(180deg)}
.table-cup[data-seat=left] img{transform:rotate(90deg)}
.table-cup[data-seat=right] img{transform:rotate(-90deg)}
.table-cup img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 5px 4px #130b214d);pointer-events:none}
.table-cup:focus-visible{outline:1px solid #e9ba92;outline-offset:0;border-radius:50%}
.game-device.no-objects.coffee-active .table-cup.is-reacting{display:block}
.game-device.coffee-active .table-cup{pointer-events:none}
.self-reactions{display:grid;place-items:center;width:25px;height:25px;padding:0;border-radius:50%;border:1px solid #cbb69e33;background:#ffffff05;color:#d1b9a6}
.self-reactions svg{width:15px;height:15px}
.coffee-art-img{width:90px;height:90px;object-fit:contain}
.tile-image .coffee-art-img{width:115px;height:115px}
.product-art .coffee-art-img{width:100%;height:100%}
.coffee-preview-art{height:134px;display:grid;place-items:center;margin:3px 0 12px;background:radial-gradient(ellipse,#e4d5c055,transparent 70%)}
.coffee-preview-art img{width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 9px 9px #49332620)}
.item-reaction{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:#eae0d2;border:1px solid #d8c7b5;border-radius:14px;text-align:left;margin-top:10px}
.item-reaction>img{width:56px;height:56px;object-fit:contain}.item-reaction>span{flex:1}.item-reaction strong{display:block;font-size:13px;font-weight:500}.item-reaction small{display:block;margin-top:5px;font-size:10px;color:#8b7868;line-height:1.4}.item-reaction>svg{width:18px;height:18px;color:#927562}
.coffee-grip{position:absolute;z-index:60;pointer-events:none;object-fit:contain;max-width:none;filter:drop-shadow(2px 6px 5px #130d2438);mask-image:linear-gradient(to top,transparent,#000 9%);will-change:transform}
.gold-jewelry .coffee-grip[data-seat=bottom]{filter:sepia(.12) saturate(1.05) drop-shadow(2px 6px 5px #130d2438)}
.reaction-bubble.coffee-caption{bottom:64px;white-space:nowrap;font-size:11px;letter-spacing:.2px;padding:9px 14px;border:1px solid #c9a98c33;border-radius:18px;background:#281c24e8;color:#ecdbc8;z-index:65}