:root { color-scheme: light; --ink:#18354a; --cream:#fff6df; --paper:#fffdf6; --turquoise:#62cfc6; --apricot:#ffb47d; --berry:#d85f6c; --sun:#ffd568; --line:3px solid var(--ink); }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-width:320px; background:radial-gradient(circle at 80% 0,#fff1b5 0 12%,transparent 30%),var(--cream); color:var(--ink); font:18px/1.42 ui-rounded,"Trebuchet MS",sans-serif; } button,a { min-height:44px; font:inherit; } button { cursor:pointer; border:var(--line); border-radius:14px; color:var(--ink); background:var(--paper); font-weight:800; padding:9px 14px; } button:disabled { cursor:not-allowed; opacity:.55; } a { color:inherit; font-weight:800; } :focus-visible { outline:4px solid var(--berry); outline-offset:3px; }
.skip-link { position:absolute; z-index:4; left:8px; top:-60px; background:var(--paper); padding:10px; border:var(--line); border-radius:10px; } .skip-link:focus { top:8px; }.game-bar { min-height:58px; display:flex; align-items:center; gap:14px; justify-content:space-between; padding:8px clamp(10px,3vw,32px); border-bottom:var(--line); background:#fffdf6e8; }.game-bar a { display:inline-flex; min-height:44px; align-items:center; padding:8px 12px; text-decoration:none; }.game-bar strong { letter-spacing:.08em; font-size:.82rem; }.game-bar [data-player-profile-slot] { margin-left:auto; }
main { width:min(1160px,100%); margin:auto; padding:22px clamp(10px,3vw,28px); }.card { border:var(--line); border-radius:25px; background:var(--paper); box-shadow:0 6px 0 var(--ink); }.welcome { min-height:440px; padding:clamp(22px,6vw,64px); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:24px; }.eyebrow { margin:0 0:8px; font-size:.78rem; font-weight:900; letter-spacing:.11em; }.welcome h1,.round-head h1,.ending h1 { font-size:clamp(2rem,6vw,4.5rem); line-height:1.04; margin:.1em 0; }.primary { min-height:48px; background:var(--turquoise); box-shadow:0 3px 0 var(--ink); }.welcome-art { position:relative; min-height:250px; overflow:hidden; border:var(--line); border-radius:22px; background:linear-gradient(#b4eee7 0 58%,#ffe2bc 58%); }.pennants { position:absolute; inset:16px 0 auto; text-align:center; font-size:3rem; color:var(--berry); letter-spacing:.2em; }.bun { position:absolute; width:56px; height:56px; border:var(--line); border-radius:50%; background:var(--sun); }.bun-a { top:95px; left:33%; }.bun-b { top:130px; left:58%; }.mat { position:absolute; bottom:30px; width:105px; height:68px; border:var(--line); border-radius:20px; background:var(--apricot); }.mat-a { left:17%; }.mat-b { right:16%; }
.activity { padding:clamp(12px,2vw,24px); }.round-head { max-width:760px; }.round-head h1 { font-size:clamp(1.55rem,4vw,2.5rem); }.round-head p { margin:.28em 0; }.compact-prompt { max-width:680px; }.whole-boundary { margin:14px 0; padding:12px; border:var(--line); border-radius:20px; background:#e9fbf4; }.whole-boundary>p { margin:0 0 8px; font-weight:900; }.feast-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }.container { min-height:112px; padding:9px; display:grid; grid-template-columns:1fr auto; text-align:left; background:var(--apricot); }.container.tray { background:var(--turquoise); }.container.source { box-shadow:inset 0 0 0 5px var(--berry); }.container.chosen { background:#ffe987; }.container em { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px; min-height:30px; margin-top:5px; }.counter { display:inline-grid; width:21px; height:21px; place-items:center; border:2px solid var(--ink); border-radius:50%; background:#ffd56b; }.counter b { width:5px; height:5px; border-radius:50%; background:#e17f54; }.phase-actions,.tool-row,.finish-actions,.help-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }.tool-row { border-top:2px dashed #7693a1; padding-top:14px; }.tool-row a,.dialog-all-games,.finish-actions a { display:inline-flex; min-height:44px; align-items:center; padding:8px 14px; border:var(--line); border-radius:14px; background:var(--paper); text-decoration:none; }.notation,.meaning,.accepted-summary { margin-top:16px; padding:18px; }.notation h2,.meaning h2 { margin-top:0; }.stepper { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid #aac2c5; }.stepper div { display:flex; align-items:center; gap:8px; }.stepper button { width:48px; min-height:48px; padding:0; font-size:1.5rem; }.stepper output { display:grid; min-width:52px; min-height:44px; place-items:center; border-bottom:var(--line); font-weight:900; }.support-link { margin-top:12px; background:#ffe5a5; }.meaning label { display:block; margin:8px 0; padding:10px; border:2px solid #aac2c5; border-radius:12px; }.meaning input { width:20px; height:20px; vertical-align:middle; }.ending { padding:clamp(20px,5vw,56px); text-align:center; }.summary-art { display:grid; grid-template-columns:repeat(5,auto); justify-content:center; gap:6px; max-width:360px; margin:14px auto; padding:12px; border:var(--line); border-radius:18px; background:var(--apricot); }.summary-art span { display:flex; gap:3px; }.extension { margin:18px auto 0; max-width:650px; padding:12px; border-radius:12px; background:#fff1c0; }.static-guide { width:min(1050px,calc(100% - 20px)); margin:22px auto 50px; padding:20px; border-top:var(--line); }.static-guide h2 { margin-top:0; }
dialog { width:min(760px,calc(100% - 22px)); max-height:calc(100dvh - 22px); border:var(--line); border-radius:22px; color:var(--ink); background:var(--paper); }.dialog::backdrop { background:#18354ab8; } dialog section { padding:18px; } dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } dialog h2 { margin:0; }.diagram { margin:18px 0; min-height:120px; padding:16px; border:var(--line); border-radius:18px; background:#e9fbf4; }.diagram.outline span,.diagram.worked { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }.diagram.outline i,.diagram.worked span { display:flex; min-width:80px; min-height:45px; align-items:center; justify-content:center; border:2px dashed var(--ink); border-radius:10px; font-style:normal; }.diagram.worked span { padding:8px; }.diagram.worked .chosen { background:#ffe987; border-style:solid; }.rounds { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }.dialog-all-games { margin-top:16px; }
@media (max-width:560px) { body { font-size:16px; }.welcome { grid-template-columns:1fr; min-height:0; }.welcome-art { min-height:190px; }.game-bar strong { display:none; }.feast-board { grid-template-columns:repeat(2,minmax(0,1fr)); }.container { min-width:0; }.stepper { align-items:flex-start; flex-direction:column; }.round-head h1 { font-size:2rem; } }
@media (max-height:360px) and (min-width:650px) { .game-bar { min-height:40px; padding-block:2px; }.game-bar a { min-height:34px; }.game-bar strong { font-size:.7rem; }.activity { padding:8px 12px; }.round-head { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:baseline; }.round-head .eyebrow { grid-column:1; grid-row:1; }.round-head h1 { grid-column:2; grid-row:1; font-size:1.35rem; }.round-head .compact-prompt { grid-column:1/-1; font-size:.92rem; }.round-head #feedback { grid-column:1/-1; font-size:.85rem; }.whole-boundary { margin:6px 0; padding:7px; }.whole-boundary>p { margin-bottom:3px; }.feast-board { grid-template-columns:repeat(3,minmax(100px,1fr)); gap:6px; }.container { min-height:72px; padding:6px; }.container em { min-height:18px; gap:2px; }.counter { width:15px; height:15px; }.counter b { width:3px; height:3px; }.phase-actions,.tool-row { margin-top:7px; } }
.arrangement-two-rows-of-four .tray,.arrangement-two-rows-of-five .tray,.arrangement-three-rows-of-four .tray,.arrangement-three-rows-of-five .tray,.arrangement-three-rows-of-three .tray,.arrangement-four-rows-of-five .tray { grid-column:1/-1; }.feast-board .tray em { display:grid; justify-content:center; justify-items:center; align-items:center; gap:5px; }.arrangement-two-rows-of-four .tray em,.arrangement-three-rows-of-four .tray em { grid-template-columns:repeat(4,21px); }.arrangement-two-rows-of-five .tray em,.arrangement-three-rows-of-five .tray em,.arrangement-four-rows-of-five .tray em { grid-template-columns:repeat(5,21px); }.arrangement-three-rows-of-three .tray em { grid-template-columns:repeat(3,21px); }.arrangement-two-offset-rows .tray em { grid-template-columns:repeat(4,21px); }.arrangement-two-offset-rows .tray em .counter:nth-child(n+5) { transform:translateX(13px); }.arrangement-loose-zigzag .tray em,.arrangement-single-zigzag .tray em { grid-template-columns:repeat(5,21px); }.arrangement-loose-zigzag .tray em .counter:nth-child(even),.arrangement-single-zigzag .tray em .counter:nth-child(even) { transform:translateY(7px); }.arrangement-loose-zigzag .tray em .counter:nth-child(3n),.arrangement-single-zigzag .tray em .counter:nth-child(3n) { transform:translateY(-5px); }.diagram.outline span,.diagram.worked,.rounds,.share-boundary { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }.help-table,.share-boundary>span { display:flex; min-width:80px; min-height:45px; align-items:center; justify-content:center; gap:5px; padding:8px; border:2px dashed var(--ink); border-radius:10px; }.diagram.worked b,.help-table b,.share-boundary b { width:100%; text-align:center; }.share-boundary .chosen { background:#ffe987; border-style:solid; }
@media (max-height:360px) and (min-width:650px) { .game-bar { min-height:48px; }.game-bar a { min-height:44px; }.activity { padding:6px 12px; }.round-head h1 { font-size:1.25rem; }.round-head .compact-prompt { font-size:.82rem; }.round-head #feedback { font-size:.78rem; }.whole-boundary { margin:4px 0; padding:5px; }.whole-boundary>p { margin-bottom:2px; }.feast-board { gap:5px; }.container { min-height:64px; padding:5px; }.container em { min-height:15px; gap:2px; }.counter { width:14px; height:14px; }.counter b { width:3px; height:3px; }.phase-actions,.tool-row { margin-top:5px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.game-bar a,.tool-row a,.dialog-all-games,.finish-actions a { height:48px; min-height:48px; }
a[href] { display:inline-flex; min-height:48px; align-items:center; }
.accepted-summary-art { margin:10px 0; padding:10px; border:var(--line); border-radius:18px; background:#e9fbf4; text-align:center; }.accepted-summary-art p { margin:2px 0; font-weight:800; }.accepted-summary-art .summary-art { margin:6px auto; }.accepted-summary-art .summary-art .chosen { padding:3px; border-radius:8px; background:#ffe987; box-shadow:inset 0 0 0 2px var(--ink); }.accepted-board { margin-top:14px; }.accepted-board summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:800; }
.summary-art { gap:3px; padding:8px; }.summary-art span { padding:3px; border:2px solid var(--ink); border-radius:7px; background:#fffdf6; }.summary-art .counter { width:14px; height:14px; border-width:2px; }.summary-art .counter b { width:3px; height:3px; }
.arrangement-loose-ring .tray em { position:relative; display:block; width:min(100%,280px); height:145px; min-height:145px; margin:6px auto; }.arrangement-loose-ring .tray em .counter { position:absolute; left:var(--ring-x); top:var(--ring-y); transform:translate(-50%,-50%); }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(1) { --ring-x:50%;--ring-y:6%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(2) { --ring-x:77%;--ring-y:14%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(3) { --ring-x:94%;--ring-y:36%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(4) { --ring-x:94%;--ring-y:64%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(5) { --ring-x:77%;--ring-y:86%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(6) { --ring-x:50%;--ring-y:94%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(7) { --ring-x:23%;--ring-y:86%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(8) { --ring-x:6%;--ring-y:64%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(9) { --ring-x:6%;--ring-y:36%; }.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(10) { --ring-x:23%;--ring-y:14%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(1) { --ring-x:50%;--ring-y:5%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(2) { --ring-x:72%;--ring-y:10%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(3) { --ring-x:89%;--ring-y:25%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(4) { --ring-x:96%;--ring-y:50%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(5) { --ring-x:89%;--ring-y:75%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(6) { --ring-x:72%;--ring-y:90%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(7) { --ring-x:50%;--ring-y:95%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(8) { --ring-x:28%;--ring-y:90%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(9) { --ring-x:11%;--ring-y:75%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(10) { --ring-x:4%;--ring-y:50%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(11) { --ring-x:11%;--ring-y:25%; }.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(12) { --ring-x:28%;--ring-y:10%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(1) { --ring-x:50%;--ring-y:4%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(2) { --ring-x:65%;--ring-y:5%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(3) { --ring-x:79%;--ring-y:12%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(4) { --ring-x:90%;--ring-y:23%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(5) { --ring-x:96%;--ring-y:38%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(6) { --ring-x:97%;--ring-y:50%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(7) { --ring-x:96%;--ring-y:62%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(8) { --ring-x:90%;--ring-y:77%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(9) { --ring-x:79%;--ring-y:88%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(10) { --ring-x:65%;--ring-y:95%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(11) { --ring-x:50%;--ring-y:96%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(12) { --ring-x:35%;--ring-y:95%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(13) { --ring-x:21%;--ring-y:88%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(14) { --ring-x:10%;--ring-y:77%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(15) { --ring-x:4%;--ring-y:62%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(16) { --ring-x:3%;--ring-y:50%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(17) { --ring-x:4%;--ring-y:38%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(18) { --ring-x:10%;--ring-y:23%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(19) { --ring-x:21%;--ring-y:12%; }.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(20) { --ring-x:35%;--ring-y:5%; }
@media (max-height:360px) and (min-width:650px) { .ending { padding:8px 12px; }.ending h1 { font-size:1.35rem; }.ending .summary-art { margin:5px auto; padding:5px; gap:3px; }.ending .summary-art .counter { width:13px; height:13px; }.ending p { margin:4px 0; font-size:.82rem; }.ending .extension { margin-top:6px; padding:6px; }.finish-actions { margin-top:6px; } }

/* Ring trays need the full board width. These positions keep every exact
   fixture circle separate at the narrow 320px board and in short landscape. */
.arrangement-loose-ring .tray { grid-column:1/-1; }
.arrangement-loose-ring .tray em { position:relative; display:block; width:min(100%,280px); height:175px; min-height:175px; margin:6px auto; }
.arrangement-loose-ring .tray em .counter { position:absolute; left:var(--fraction-ring-x); top:var(--fraction-ring-y); transform:translate(-50%,-50%); }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(1) { --fraction-ring-x:50%; --fraction-ring-y:7%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(2) { --fraction-ring-x:76%; --fraction-ring-y:15%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(3) { --fraction-ring-x:93%; --fraction-ring-y:35%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(4) { --fraction-ring-x:93%; --fraction-ring-y:65%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(5) { --fraction-ring-x:76%; --fraction-ring-y:85%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(6) { --fraction-ring-x:50%; --fraction-ring-y:93%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(7) { --fraction-ring-x:24%; --fraction-ring-y:85%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(8) { --fraction-ring-x:7%; --fraction-ring-y:65%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(9) { --fraction-ring-x:7%; --fraction-ring-y:35%; }
.arrangement-loose-ring .tray em[data-total="10"] .counter:nth-child(10) { --fraction-ring-x:24%; --fraction-ring-y:15%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(1) { --fraction-ring-x:50%; --fraction-ring-y:7%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(2) { --fraction-ring-x:73%; --fraction-ring-y:13%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(3) { --fraction-ring-x:89%; --fraction-ring-y:28%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(4) { --fraction-ring-x:95%; --fraction-ring-y:50%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(5) { --fraction-ring-x:89%; --fraction-ring-y:72%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(6) { --fraction-ring-x:73%; --fraction-ring-y:87%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(7) { --fraction-ring-x:50%; --fraction-ring-y:93%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(8) { --fraction-ring-x:27%; --fraction-ring-y:87%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(9) { --fraction-ring-x:11%; --fraction-ring-y:72%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(10) { --fraction-ring-x:5%; --fraction-ring-y:50%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(11) { --fraction-ring-x:11%; --fraction-ring-y:28%; }
.arrangement-loose-ring .tray em[data-total="12"] .counter:nth-child(12) { --fraction-ring-x:27%; --fraction-ring-y:13%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(1) { --fraction-ring-x:50%; --fraction-ring-y:7%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(2) { --fraction-ring-x:64%; --fraction-ring-y:9%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(3) { --fraction-ring-x:77%; --fraction-ring-y:15%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(4) { --fraction-ring-x:86%; --fraction-ring-y:24%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(5) { --fraction-ring-x:93%; --fraction-ring-y:37%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(6) { --fraction-ring-x:95%; --fraction-ring-y:50%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(7) { --fraction-ring-x:93%; --fraction-ring-y:63%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(8) { --fraction-ring-x:86%; --fraction-ring-y:76%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(9) { --fraction-ring-x:77%; --fraction-ring-y:85%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(10) { --fraction-ring-x:64%; --fraction-ring-y:91%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(11) { --fraction-ring-x:50%; --fraction-ring-y:93%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(12) { --fraction-ring-x:36%; --fraction-ring-y:91%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(13) { --fraction-ring-x:23%; --fraction-ring-y:85%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(14) { --fraction-ring-x:14%; --fraction-ring-y:76%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(15) { --fraction-ring-x:7%; --fraction-ring-y:63%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(16) { --fraction-ring-x:5%; --fraction-ring-y:50%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(17) { --fraction-ring-x:7%; --fraction-ring-y:37%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(18) { --fraction-ring-x:14%; --fraction-ring-y:24%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(19) { --fraction-ring-x:23%; --fraction-ring-y:15%; }
.arrangement-loose-ring .tray em[data-total="20"] .counter:nth-child(20) { --fraction-ring-x:36%; --fraction-ring-y:9%; }
@media (max-height:360px) and (min-width:650px) { .arrangement-loose-ring .tray em { height:110px; min-height:110px; } }