:root{font-family:system-ui,sans-serif;color:#28372f;background:#faf6ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}main{max-width:1200px;margin:auto;padding:16px}header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}h1{font-size:24px;margin:0}h2{font-size:16px;margin:0}.restart{background:transparent;border:1px solid #b9c2ad;border-radius:8px;padding:8px 12px;white-space:nowrap}.instructions{background:#eaf0df;border-radius:10px;display:flex;gap:16px;padding:12px 16px;font-size:13px;line-height:1.5}.instructions b{white-space:nowrap}.layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;margin-top:16px}.game{min-width:0}.table{border:1px solid #d6ddcc;background:#f1f3e9;border-radius:12px;padding:14px}.plate-heading,.hand-heading{display:flex;align-items:center;justify-content:space-between}.plate-heading>b{font-size:24px}.plate-heading small{font-size:12px;font-weight:400}.plate{display:flex;gap:6px;flex-wrap:wrap;min-height:85px;align-items:center;padding:10px 0}.divider{border-top:1px dashed #cbd2bf;color:#657157;font-size:10px;letter-spacing:2px;padding:12px 0}.card{border:1px solid #00000018;border-radius:10px;display:flex;align-items:center;flex-direction:column;gap:7px;padding:14px 7px;color:#303a31;box-shadow:0 3px #0000000b;min-width:0}.food{font-size:36px;line-height:1.2}.card strong{font-size:12px}.card small{font-size:10px}.card.served{width:76px;gap:4px;padding:8px 3px}.served .food{font-size:23px}.served strong{font-size:9px}.served small{font-size:8px}.hand{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.hand .card{transition:transform .15s,opacity .15s}.hand .card:hover:not(:disabled){transform:translateY(-3px)}button:focus-visible{outline:3px solid #345b49;outline-offset:3px}.card:disabled{cursor:pointer;opacity:.55}.card.selected{opacity:1;outline:3px solid #345b49;outline-offset:2px}.hand-heading{margin:14px 0 12px}.hand-heading span{font-size:12px;color:#657157}.status{font-size:13px;color:#43573b;padding-top:14px;min-height:34px;line-height:1.5}.thinking{display:inline-flex;align-items:center;gap:8px}.dots{display:inline-flex;gap:4px}.dots i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:thinking 1s infinite ease-in-out}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}@keyframes thinking{0%,70%,to{transform:translateY(0);opacity:.35}35%{transform:translateY(-4px);opacity:1}}.menu{border:1px solid #deded3;border-radius:12px;padding:14px;align-self:start}.menu h2{margin-bottom:16px}.menu-item{display:flex;align-items:center;gap:10px;margin-top:16px}.menu-icon{display:grid;place-items:center;width:46px;height:52px;flex-shrink:0;border-radius:8px;font-size:28px}.menu-item strong{font-size:13px}.menu-item p{font-size:12px;margin:3px 0}.menu-item small{font-size:10px;color:#657157}@media(max-width:740px){.layout{grid-template-columns:minmax(0,1fr)}.menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.menu h2{grid-column:1/-1;margin:0}.menu-item{margin:0}.hand{grid-template-columns:repeat(3,minmax(0,1fr))}.instructions{flex-direction:column;gap:3px}}@media(max-width:380px){main{padding:10px}h1{font-size:20px}.hand{grid-template-columns:repeat(2,minmax(0,1fr))}.menu{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.6}.hand .card{transition:none}}.table{background-color:#bf8b57;background-image:linear-gradient(90deg,#61351712,transparent 24%,#fff2 50%,transparent 76%,#61351712),url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='240'%20viewBox='0%200%20480%20240'%3e%3cg%20fill='none'%20stroke='%236c401f'%20stroke-width='1'%20opacity='.18'%3e%3cpath%20d='M0%2012Q120%202%20240%2014T480%2012M0%2022Q120%2012%20240%2024T480%2022M0%2040Q170%2028%20330%2043T480%2040M0%2052Q170%2040%20330%2055T480%2052M0%2088Q120%2078%20240%2090T480%2088M0%20102Q100%2092%20220%20104T480%20102M0%20132Q170%20120%20330%20135T480%20132M0%20142Q170%20130%20330%20145T480%20142M0%20178Q120%20168%20240%20180T480%20178M0%20190Q100%20180%20220%20192T480%20190M0%20222Q170%20210%20330%20225T480%20222M0%20232Q170%20220%20330%20235T480%20232'/%3e%3cellipse%20cx='340'%20cy='72'%20rx='47'%20ry='9'/%3e%3cellipse%20cx='340'%20cy='72'%20rx='27'%20ry='5'/%3e%3cellipse%20cx='100'%20cy='162'%20rx='35'%20ry='7'/%3e%3cellipse%20cx='100'%20cy='162'%20rx='17'%20ry='3'/%3e%3c/g%3e%3cpath%20d='M0%20119H480M0%20239H480'%20stroke='%2368401f'%20opacity='.15'/%3e%3cpath%20d='M0%20120H480M0%200H480'%20stroke='%23ffe0ac'%20opacity='.2'/%3e%3c/svg%3e");background-size:100% 100%,480px 240px;border:8px solid #835632;border-radius:36px;box-shadow:inset 0 0 0 2px #e3b781,inset 0 5px 22px #53301840,0 4px 8px #53301820;padding:18px 16px;color:#352718}.plate{justify-content:center;min-height:100px;max-width:620px;margin:auto}.plate-heading{justify-content:center;gap:14px}.plate-heading h2{font-size:14px}.plate-heading>b{font-size:20px}.table-center{height:30px;margin:4px auto 12px;width:65%;border-bottom:1px solid #69422038}.served{box-shadow:0 3px 5px #43280f33}.opponent-hand{position:relative;height:86px;margin:0 auto 14px;max-width:260px}.card-back{position:absolute;left:calc(50% - 25px);top:0;width:50px;height:68px;display:grid;place-items:center;font-size:24px;border:3px solid #f5e8c9;border-radius:7px;background:repeating-linear-gradient(45deg,#315b52 0,#315b52 5px,#3d6a5e 5px,#3d6a5e 7px);box-shadow:0 2px 4px #35271866;transform-origin:50% 100%}.table .card{flex-shrink:0}@media(max-width:380px){.table{padding:14px 8px;border-width:5px}.plate{gap:5px}.table .served{width:66px}}.opponent-hand{height:88px;margin-bottom:8px}.hand{display:flex;justify-content:center;align-items:flex-end;gap:0;overflow-x:auto;padding:12px 8px 10px;isolation:isolate}.hand .card{flex:0 0 100px;width:100px;aspect-ratio:5 / 7;min-height:140px;padding:14px 5px;justify-content:center;position:relative;box-shadow:0 3px 7px #35271833}.hand .card+.card{margin-left:-24px}.hand .card small{font-size:9px;white-space:nowrap;letter-spacing:-.2px}.hand .card:hover:not(:disabled),.hand .card:focus-visible{z-index:2;transform:translateY(-8px)}.hand .card.selected{z-index:3}@media(max-width:1100px){.hand{justify-content:flex-start}.hand .card{flex-basis:90px;width:90px;min-height:126px}.hand .card+.card{margin-left:-20px}}@media(max-width:740px){.hand .card{flex-basis:100px;width:100px;min-height:140px}.hand .card+.card{margin-left:-24px}}.game{position:relative}.swapping .opponent-hand,.swapping .hand{visibility:hidden}.swap-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.travelling-hand{position:absolute;left:50%;width:0;height:0}.travelling-hand .card-back{top:-34px;left:-25px}.to-opponent{animation:pass-up 1.1s ease-in-out both}.to-player{animation:pass-down 1.1s ease-in-out both}@keyframes pass-up{0%,10%{top:var(--lower);transform:translate(0) scale(1.2)}50%{transform:translate(-65px) rotate(-8deg)}90%,to{top:var(--upper);transform:translate(0) scale(1)}}@keyframes pass-down{0%,10%{top:var(--upper);transform:translate(0) scale(1)}50%{transform:translate(65px) rotate(8deg)}90%,to{top:var(--lower);transform:translate(0) scale(1.2)}}@media(prefers-reduced-motion:reduce){.travelling-hand{animation:none}.to-opponent{top:var(--upper)}.to-player{top:var(--lower)}}.status{text-align:center;min-height:68px;display:flex;justify-content:center;align-items:center;padding:14px 8px}.status.your-turn{font-size:28px;font-weight:800;letter-spacing:.02em;color:#284e3c}.menu .instructions{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;margin-top:18px;padding:12px;font-size:12px}.table .card.served{aspect-ratio:5/7;min-height:0;justify-content:center}.table-divider{width:65%;border-top:1px solid #69422038;margin:18px auto}.card:disabled{opacity:1}.hand{padding-top:22px;padding-bottom:24px}.hand .card{transform:translateY(var(--lift,0px)) rotate(var(--arc,0deg));transform-origin:50% 100%}.hand .card:hover:not(:disabled),.hand .card:focus-visible{transform:translateY(calc(var(--lift,0px) - 10px)) rotate(var(--arc,0deg))}.plate .card{position:relative;transform-origin:top left}.plate{display:grid;grid-template-columns:repeat(3,76px);grid-template-rows:repeat(2,132px);justify-content:center;align-items:start;gap:8px 20px;height:292px;min-height:292px;padding:10px 0}.card-stack{position:relative;width:76px;height:132px}.stack-item{position:absolute;left:0;width:76px}.stack-item .card.served{width:76px}.stack-count{position:absolute;right:-9px;bottom:0;z-index:40;border-radius:20px;background:#304d3b;color:#fff;padding:2px 7px;font-size:12px;font-weight:700;pointer-events:none}.hand{min-height:186px}.counting-card{transform:translateY(-8px);filter:drop-shadow(0 0 6px #ffe09a)}.counting-card .card{outline:3px solid #fff3a6}@media(max-width:380px){.plate{grid-template-columns:repeat(3,66px);column-gap:10px}.card-stack,.stack-item,.stack-item .card.served{width:66px}}@media(prefers-reduced-motion:reduce){.counting-card{transform:none}}.plate{display:flex;flex-wrap:nowrap;align-items:flex-start;justify-content:center;gap:10px;height:218px;min-height:218px;padding:10px 0}.card-stack{flex:0 1 76px;min-width:0;width:76px;height:198px}.stack-item,.stack-item .card.served{width:100%}.card{border-width:2px;border-style:solid}.stack-item .card.served{box-shadow:0 2px 2px #35271835}@media(max-width:480px){.plate{gap:5px}.stack-item .card.served{padding:6px 1px}.stack-item .card strong{font-size:8px;overflow-wrap:anywhere}.stack-item .food{font-size:20px}}.food-svg{display:block;width:100%;height:100%}.food{display:block;width:48px;height:48px;max-width:100%}.served .food{width:36px;height:36px}.menu-icon .food-svg{width:42px;height:42px}.card-back .food-svg{width:36px;height:36px}.incomplete .food{opacity:.38}.scoring-tooltip{position:fixed;z-index:1000;pointer-events:none;display:flex;flex-direction:column;gap:5px;width:200px;padding:12px 14px;background:#fffdf5;color:#28372f;border:1px solid #b5bca8;border-radius:10px;box-shadow:0 5px 18px #28372f30;font-size:12px;line-height:1.4;text-align:center}.scoring-tooltip strong{font-size:13px}.scoring-tooltip .incomplete-note{color:#b02b2b;font-weight:700}.served:focus-visible{outline:3px solid #345b49;outline-offset:3px}header{display:grid;grid-template-columns:1fr auto 1fr}header h1{grid-column:2;text-align:center}header .restart{grid-column:3;justify-self:end}.plate{height:190px;min-height:190px;padding:6px 0}.card-stack{height:178px}.table-divider{margin:4px auto}.table{padding-top:12px;padding-bottom:8px}@media(max-width:650px){header{grid-template-columns:1fr;gap:10px}header h1{grid-column:1}header .restart{grid-column:1;justify-self:center}}header{display:flex;justify-content:space-between}header h1{text-align:left}header .restart{margin-left:auto}.card strong{display:block;width:100%;text-align:center;line-height:1.2}.opponent-hand{transform:rotate(180deg)}.plate{height:182px;min-height:182px;padding:2px 0}.table-divider{margin:0 auto}.table .plate-heading{line-height:1.1}.table{padding-top:8px;padding-bottom:4px}@media(max-width:650px){header{display:flex;gap:10px}header h1{font-size:20px}.restart{font-size:12px}}.hand .card,.table .card.served{aspect-ratio:4/5;min-height:0}.card-back{height:62.5px}.travelling-hand .card-back{top:-31.25px}.hand{min-height:171px}.plate{height:172px;min-height:172px}.card-stack{height:168px}@media(max-width:1100px){.hand .card{min-height:0}}@media(max-width:740px){.hand .card{min-height:0}}.card strong,.menu-item strong,.scoring-tooltip strong{font-family:Luckiest Guy,system-ui,sans-serif;font-weight:400;letter-spacing:.1pt}