/* Circle-first playfield, with a half-hidden hand along the bottom edge. */
.circle-focus{--tray-height:98px;--circle-card-width:104px;--circle-card-height:148px}
.circle-focus .table-header{height:55px;flex-shrink:0}
.circle-focus .opponents{padding:8px 22px;min-height:61px;max-height:68px;background:#101a26}
.circle-focus .seat{padding:7px 11px;background:#182534a6}
.circle-focus .table-body{display:block;position:relative;min-height:0}
.circle-focus .market-panel,.circle-focus .activity-panel{display:none}
.circle-focus .playfield{height:100%;display:flex;flex-direction:column;padding:10px 24px 14px;overflow:hidden;background:radial-gradient(ellipse at 50% 58%,#34584b70,#142b2d99 55%,#101d27 85%)}
.circle-focus .turn-guide{flex-shrink:0;padding:0 2px 9px;border:0;min-height:54px}
.circle-focus .turn-guide h2{font-size:23px;margin:3px 0}
.circle-focus .turn-guide .eyebrow{font-size:7px}
.circle-focus .turn-guide p{font-size:10px;color:#a5b7bc}
.circle-focus .bunny-circle{flex:1;min-height:0;border:1px solid #b6c8a724;border-radius:38% / 46%;position:relative;padding:16px 38px 22px;background:radial-gradient(ellipse,#406a4a12,#16302b08);box-shadow:inset 0 0 75px #0002,0 0 0 7px #b6c8a703;transition:box-shadow .18s,border-color .18s}
.circle-focus .circle-label{margin:0 0 12px;font-size:8px;letter-spacing:3px;color:#a1b9a7}
.circle-focus .bunny-groups{height:calc(100% - 23px);align-content:center;align-items:center;justify-content:center;gap:13px;overflow:auto;padding:8px 10px 15px}
.circle-focus .bunny-group{flex:1 1 160px;max-width:420px;min-width:135px;padding:10px;border:0;border-radius:12px;background:linear-gradient(180deg,#0b171a22,transparent)}
.circle-focus .group-title{font-size:10px;justify-content:center;color:#c4d1d2;margin:0 0 10px;gap:7px}
.circle-focus .group-title>span{margin-left:4px;border:1px solid #ffffff15;padding:1px 5px;border-radius:5px;font-size:8px}
.circle-focus .bunny-cards{justify-content:center;gap:9px}
.circle-focus .bunny-unit .card{width:var(--circle-card-width);height:var(--circle-card-height);box-shadow:0 8px 18px #0006;border-radius:8px}
.circle-focus .bunny-unit{border-radius:9px;position:relative;transition:transform .18s,filter .18s}
.circle-focus .bunny-placeholder{height:var(--circle-card-height);min-width:90px;gap:10px}
.circle-focus .bunny-placeholder img{width:38px;opacity:.12}
.circle-focus .bunny-placeholder span{font-size:9px;color:#82998e}
.circle-focus .bunny-flags{position:absolute;left:0;right:0;bottom:-10px;z-index:5;gap:4px}
.circle-focus .bunny-flags>span{padding:4px 7px;border-radius:8px;background:#15232eee;font-size:9px;border:1px solid #edac6933}
.circle-focus .bunny-flags button{font-size:9px;padding:5px 6px;min-height:25px;border:1px solid #e7a36544;border-radius:6px;background:#61461fed}
.circle-focus .center-decks{position:absolute;bottom:10px;left:18px;margin:0;gap:8px;z-index:1;opacity:.72;pointer-events:none}
.circle-focus .center-decks .card{pointer-events:auto}
.circle-focus .deck-stack,.circle-focus .discard-top .card{width:29px;height:41px;border-radius:3px}
.circle-focus .deck-stack>span{font-size:7px;min-width:18px;min-height:18px}
.circle-focus .deck-label{font-size:6px;max-width:65px}
.circle-focus .deck-label small{display:none}
.circle-focus .discard-top{margin-left:5px}
.circle-focus .discard-top>span{font-size:5px;bottom:-10px}
.circle-focus .die-result{width:40px;height:44px;margin-left:5px;border-radius:9px}
.circle-focus .die-result>strong{font-size:21px}.circle-focus .die-result>span{font-size:6px;margin-top:1px}.circle-focus .die-result>small{font-size:5px}
.circle-focus .player-tray{height:var(--tray-height);padding:10px 20px 0;position:relative;display:block;background:linear-gradient(#15222ee0,#101824);border-top:1px solid #d6c6a427;box-shadow:0 -10px 45px #0002;overflow:visible}
.circle-focus .your-seat{width:135px;padding:0;position:absolute;left:20px;top:13px}
.circle-focus .your-name .avatar{width:28px;height:28px;font-size:15px}.circle-focus .your-name>span{font-size:11px}.circle-focus .your-name small{font-size:5px}
.circle-focus .your-bank{margin-top:8px;gap:13px}.circle-focus .your-bank b{font-size:16px}.circle-focus .your-bank>span{font-size:10px}
.circle-focus .supply-counts{position:absolute;left:69px;top:40px;margin:0;font-size:9px;gap:7px}
.circle-focus .your-carrots{position:absolute;top:74px;left:0;max-width:140px}
.circle-focus .run-queue{position:absolute;left:165px;bottom:8px;gap:8px;padding:0;border:0;align-items:flex-end}
.circle-focus .run-slot>span{font-size:7px;margin-bottom:6px;color:#d4d8cc;letter-spacing:1px}
.circle-focus .run-slot .card,.circle-focus .empty-card{width:65px;height:93px;border-radius:6px}
.circle-focus .run-slot.bottom .card,.circle-focus .run-slot.bottom .empty-card{width:51px;height:73px}
.circle-focus .run-slot.bottom{opacity:.6}
.circle-focus .queue-arrow{margin:0 1px 36px;font-size:10px}
.circle-focus .top-run.drag-ready{cursor:grab;touch-action:none;box-shadow:0 0 0 1px #edac69bb,0 0 22px #edac6920,0 7px 16px #0005}
.circle-focus .run-slot:has(.drag-ready)>span:after{content:' ↗';color:var(--accent)}
.circle-focus .hand-zone{position:absolute;left:61%;bottom:-62px;width:min(46vw,660px);height:198px;display:block;transform:translateX(-50%);transition:transform .22s ease;z-index:5}
.circle-focus .hand-heading{position:absolute;top:0;left:0;right:0;padding:0 8px;align-items:center;z-index:8;white-space:nowrap}
.circle-focus .hand-heading small{font-size:6px;letter-spacing:.5px}
.hand-toggle{background:#172734f2;border:1px solid #ffffff20;color:#bbc6ce;padding:5px 10px;border-radius:15px;font-size:8px;letter-spacing:.8px;box-shadow:0 2px 10px #0003}
.hand-toggle>span{color:var(--accent);font-size:11px;padding-left:6px}
.circle-focus .hand{height:198px;padding:27px 0 0;align-items:flex-start;justify-content:center;overflow:visible}
.circle-focus .hand-card{width:clamp(50px,6.6vw,94px);margin-left:-9px;transform:translateY(calc(abs(var(--n) - (var(--count) - 1)/2)*4px))}
.circle-focus .hand-card .card{width:119px;height:170px;border-radius:8px;transform:rotate(calc((var(--n) - (var(--count) - 1)/2)*3deg));box-shadow:0 -3px 12px #0005}
.circle-focus .hand-expanded .hand-zone{transform:translate(-50%,-102px)}
@media(hover:hover){.circle-focus .hand-zone:hover{transform:translate(-50%,-102px)}.circle-focus .hand-card:hover{transform:translateY(-16px);z-index:10}}
.circle-focus .saved-zone{position:absolute;right:20px;top:13px;width:100px;padding-left:12px;max-height:78px}
.circle-focus .saved-zone>span{font-size:6px}.circle-focus .saved-zone>div{max-height:62px;margin-top:7px}.circle-focus .saved-zone .card{width:32px;height:46px}.circle-focus .saved-empty{font-size:10px;padding-top:9px}
.market-sheet{width:min(430px,75vw);padding:10px 15px}.market-sheet .carrot-market{grid-template-columns:repeat(6,minmax(0,1fr));margin:20px 0}.market-sheet .carrot-token{min-height:60px}.market-sheet .carrot-token>span{font-size:27px}.market-sheet .carrot-token b{font-size:10px}.market-sheet .supply-shop>button{padding:13px;font-size:13px}.market-sheet .market-foot{display:block}.market-sheet .panel-title h2{font-size:29px}
.drag-overlay{position:fixed;inset:0;z-index:70;pointer-events:none}
.target-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.target-line path{fill:none;stroke:#edac69;stroke-width:3;stroke-dasharray:6 5;filter:drop-shadow(0 1px 4px #0008)}.target-line circle{fill:#edac69;stroke:#fff1ce;stroke-width:2}
.drag-ghost{position:absolute;left:0;top:0;width:74px;height:105px;border-radius:6px;opacity:.85;box-shadow:0 10px 25px #0008;will-change:transform}
.drag-hint{position:absolute;top:15%;left:50%;transform:translateX(-50%);background:#172b35f5;border:1px solid #edac6960;padding:10px 18px;border-radius:20px;font-size:11px;color:#f0d5b5;box-shadow:0 5px 20px #0005}
.dragging-card{user-select:none;-webkit-user-select:none;cursor:grabbing}.dragging-card .hand-zone{pointer-events:none}
.circle-focus .drag-source{opacity:.28;cursor:grabbing}
.circle-focus .bunny-unit.drop-eligible{outline:2px solid #b2d5ad;outline-offset:4px;box-shadow:0 0 24px #b2d5ad33}
.circle-focus .bunny-unit.drop-hover{outline:3px solid #ffd394;outline-offset:6px;transform:translateY(-5px) scale(1.06);box-shadow:0 0 38px #edac6966}
.circle-focus .bunny-circle.drop-board{border-color:#b2d5ad99;box-shadow:inset 0 0 50px #b2d5ad12,0 0 20px #b2d5ad13}
.circle-focus .bunny-circle.drop-hover{border-color:#ffd394;box-shadow:inset 0 0 70px #edac6918,0 0 20px #edac6944}
.valid-drop .target-line path{stroke:#bfe6a9}.valid-drop .target-line circle{fill:#bfe6a9}
@media(min-width:1600px) and (min-height:800px){.circle-focus{--circle-card-width:125px;--circle-card-height:178px;--tray-height:110px}.circle-focus .hand-zone{bottom:-70px;height:220px}.circle-focus .hand-card .card{width:135px;height:193px}.circle-focus .hand{height:220px}.circle-focus .hand-expanded .hand-zone{transform:translate(-50%,-115px)}}
@media(max-width:1000px),(max-height:600px){.circle-focus{--tray-height:68px;--circle-card-width:67px;--circle-card-height:96px}.circle-focus .table-header{height:40px;padding:0 13px}.circle-focus .header-right{gap:7px}.circle-focus .header-right .quiet{font-size:9px;padding:6px 9px}.circle-focus .header-right #market>span{font-size:8px}.circle-focus .opponents{min-height:43px;max-height:43px;padding:5px 13px;gap:7px}.circle-focus .seat{padding:4px 8px}.circle-focus .playfield{padding:6px 15px 10px}.circle-focus .turn-guide{min-height:34px;padding-bottom:4px}.circle-focus .turn-guide h2{font-size:17px;margin:1px 0}.circle-focus .turn-guide .eyebrow{font-size:5px}.circle-focus .turn-guide p{display:block;font-size:8px}.circle-focus .bunny-circle{padding:8px 18px 10px;border-radius:32% / 42%}.circle-focus .circle-label{font-size:6px;letter-spacing:2px;margin:0 0 5px}.circle-focus .bunny-groups{height:calc(100% - 14px);gap:6px;padding:4px 5px 12px}.circle-focus .bunny-group{flex-basis:100px;min-width:95px;padding:5px;max-width:300px}.circle-focus .group-title{font-size:8px;margin-bottom:6px}.circle-focus .bunny-cards{gap:7px}.circle-focus .bunny-placeholder span{font-size:7px}.circle-focus .bunny-placeholder img{width:27px}.circle-focus .bunny-flags button{font-size:7px;padding:4px;min-height:20px}.circle-focus .center-decks{bottom:8px;left:9px;gap:6px}.circle-focus .deck-stack,.circle-focus .discard-top .card{width:23px;height:33px}.circle-focus .deck-label{display:none}.circle-focus .your-seat{left:12px;top:10px;width:94px}.circle-focus .your-name .avatar{width:23px;height:23px;font-size:12px}.circle-focus .your-name>span{font-size:9px}.circle-focus .your-name small{display:none}.circle-focus .your-bank{margin-top:7px;gap:12px}.circle-focus .your-bank b{font-size:13px}.circle-focus .your-bank>span{font-size:8px}.circle-focus .supply-counts{top:42px;left:0;gap:11px;font-size:8px}.circle-focus .your-carrots{display:none}.circle-focus .run-queue{left:115px;bottom:5px;gap:5px}.circle-focus .run-slot .card,.circle-focus .empty-card{width:48px;height:69px}.circle-focus .run-slot.bottom .card,.circle-focus .run-slot.bottom .empty-card{width:37px;height:53px}.circle-focus .run-slot>span{font-size:5px;margin-bottom:4px;letter-spacing:.6px}.circle-focus .queue-arrow{font-size:7px;margin-bottom:24px}.circle-focus .hand-zone{bottom:-50px;height:146px;left:63%;width:min(51vw,530px)}.circle-focus .hand{height:146px;padding-top:22px}.circle-focus .hand-card{width:clamp(38px,6.2vw,68px);margin-left:-7px}.circle-focus .hand-card .card{width:85px;height:121px;border-radius:6px}.circle-focus .hand-heading small{display:none}.circle-focus .hand-expanded .hand-zone{transform:translate(-50%,-78px)}.circle-focus .hand-toggle{font-size:6px;padding:4px 9px}.circle-focus .saved-zone{right:11px;top:10px;width:65px;padding-left:7px}.circle-focus .saved-zone>span{font-size:5px}.circle-focus .saved-zone .card{width:24px;height:34px}.circle-focus .saved-zone>div{max-height:42px}.circle-focus .saved-empty{font-size:8px;padding-top:3px}.drag-hint{font-size:9px;top:17%;padding:7px 12px}.drag-ghost{width:54px;height:77px}.market-sheet{max-height:74dvh;overflow:auto}.market-sheet .panel-title h2{font-size:23px}.market-sheet .carrot-market{margin:12px 0}.market-sheet .carrot-token{min-height:43px}.market-sheet .supply-shop{flex-direction:row}.market-sheet .supply-shop>button{flex:1;padding:9px;font-size:10px}}
@media(max-width:720px){.circle-focus{--circle-card-width:57px;--circle-card-height:81px;--tray-height:61px}.circle-focus .run-queue{left:97px}.circle-focus .run-slot .card,.circle-focus .empty-card{width:42px;height:60px}.circle-focus .run-slot.bottom .card,.circle-focus .run-slot.bottom .empty-card{width:32px;height:46px}.circle-focus .saved-zone{display:none}.circle-focus .hand-zone{left:66%;width:56vw;bottom:-45px;height:135px}.circle-focus .hand{height:135px;padding-top:22px}.circle-focus .hand-card{width:clamp(32px,5.9vw,43px)}.circle-focus .hand-card .card{width:75px;height:107px}.circle-focus .hand-expanded .hand-zone{transform:translate(-50%,-73px)}.circle-focus .your-seat{width:80px}.circle-focus .your-name .avatar{width:20px;height:20px}.circle-focus .your-name{gap:5px}.circle-focus .turn-guide h2{font-size:15px}.circle-focus .turn-guide p{font-size:7px}.circle-focus .bunny-group{min-width:85px;flex-basis:85px}.circle-focus .bunny-circle{padding-left:9px;padding-right:9px}.circle-focus .header-right .quiet{font-size:8px;padding:5px 7px}}
@media(hover:hover) and (max-height:600px){.circle-focus .hand-zone:hover{transform:translate(-50%,-78px)}}
@media(prefers-reduced-motion:reduce){.circle-focus *{transition:none!important}}

/* Keep the hover area anchored while the fan rises, so it cannot retreat
   from the pointer and collapse mid-hover. Also support secondary mice. */
.circle-focus{--hand-lift:102px}
.circle-focus .hand-heading,.circle-focus .hand{transition:transform .22s ease}
.circle-focus .hand-expanded .hand-zone{transform:translateX(-50%)}
.circle-focus .hand-expanded .hand-heading,.circle-focus .hand-expanded .hand{transform:translateY(calc(-1 * var(--hand-lift)))}
@media(any-hover:hover){
  .circle-focus .hand-zone:hover{transform:translateX(-50%)}
  .circle-focus .hand-zone:hover .hand-heading,.circle-focus .hand-zone:hover .hand{transform:translateY(calc(-1 * var(--hand-lift)))}
  .circle-focus .hand-zone:hover:before{content:'';position:absolute;left:0;right:0;top:calc(-1 * var(--hand-lift));height:var(--hand-lift);z-index:-1}
  .circle-focus .hand-card:hover{transform:translateY(-16px);z-index:10}
}
@media(min-width:1600px) and (min-height:800px){.circle-focus{--hand-lift:115px}}
@media(max-width:1000px),(max-height:600px){.circle-focus{--hand-lift:78px}}
@media(max-width:720px){.circle-focus{--hand-lift:73px}}