*{box-sizing:border-box}body{margin:0;background:#f4f5f1;color:#263d32;font-family:system-ui,-apple-system,sans-serif}main{max-width:740px;margin:auto;padding:20px 16px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}h1{font-size:20px;margin:0}h1 span{font-weight:500;margin-left:6px}button,select{font:inherit;cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #dcaf3a;outline-offset:3px}.subtle{border:0;background:transparent;color:#66736b;font-size:12px;padding:10px}.modes{display:flex;gap:6px;background:#e4e8e1;padding:5px;border-radius:10px;margin-bottom:18px}.modes button{width:50%;padding:12px 4px;border:0;background:transparent;color:#67766a;font-weight:700;font-size:14px;border-radius:7px}.modes .active{background:#fff;color:#235740;box-shadow:0 1px 5px #0001}.status{display:flex;align-items:center;gap:14px;font-size:13px;margin-bottom:12px}.status #score{flex:1;color:#758076}.status select{border:1px solid #d6ddd3;padding:7px;border-radius:6px;background:white;color:#33473b}.table{background:#28694f;border-radius:12px;padding:22px 14px 16px;text-align:center;box-shadow:inset 0 0 0 1px #21563f}.table p{color:white;font-size:14px;font-weight:700;margin:0 0 22px}.hand{display:flex;gap:3px;justify-content:center;flex-wrap:nowrap}.tile{width:42px;height:59px;border:1px solid #c8cec2;background:#fffefa;border-radius:4px;box-shadow:0 3px 0 #bbc4ac;display:inline-flex;align-items:center;justify-content:center;padding:3px;flex-shrink:0;vertical-align:middle;position:relative}.tile svg{width:100%;height:100%;display:block}.table .shape{font-size:11px;font-weight:400;color:#d0e5d7;margin:18px 0 0}.answer{padding:22px 0 0}.answer-title{margin:0 0 15px;font-size:14px;font-weight:700}.answer-title small{font-weight:400;color:#788176;margin-left:10px;font-size:11px}.choices{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}.choice{background:transparent;border:1px solid transparent;padding:5px 0 6px;border-radius:8px;display:flex;align-items:center;flex-direction:column;gap:8px;min-height:85px}.choice .tile{width:45px;height:63px}.choice small{color:#8d968a;font-size:11px}.choice.selected{background:#deeadc;border-color:#7f9a7c}.choice.selected .tile{transform:translateY(-4px)}.choice.correct{background:#daeed9;border-color:#4b9156}.choice.missed{background:#fff1ca;border-color:#d7ad36}.choice.wrong{background:#f9e1dc;border-color:#b87467}.choice:disabled{cursor:default;opacity:1}.actions{display:flex;gap:12px;align-items:center;margin-top:23px}.primary{border:0;border-radius:8px;background:#28694f;color:white;font-size:16px;font-weight:700;padding:14px 24px;flex:1}.primary:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}#feedback{min-height:22px;margin:16px 0;font-size:14px;font-weight:700;text-align:center}.solution-title{display:flex;align-items:center;justify-content:space-between;margin:14px 0}h2{font-size:15px;margin:0}.solution-title span{font-size:11px;color:#788176}.correct-tiles{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}.result-choice{border:1px solid #dce3d7;border-radius:9px;padding:10px 9px;background:#fff;display:flex;flex-direction:column;gap:7px;align-items:center;font-size:11px;color:#697765}.result-choice.active{border-color:#397a50;background:#edf4e9}.result-choice.best{border-top:3px solid #d9b246}.detail{background:white;border:1px solid #dce3d7;border-radius:10px;padding:18px 14px}.flow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.flow-block{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#7f8978}.tiles{display:flex;gap:3px;flex-wrap:wrap}.tile.called{background:#fff3c8;border-color:#d0ae56}.arrow{color:#95a18f}.wait-line{border-top:1px solid #ecf0e9;margin-top:15px;padding-top:15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.wait-line strong{font-size:13px}.wait-tile{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;color:#7e8976}.after-hand{margin-top:18px}.after-hand .tile{width:28px;height:39px;box-shadow:0 2px 0 #bbc4ac}.more summary{font-size:12px;color:#74816b;margin-top:16px;cursor:pointer}.alternative{border-top:1px solid #edf0e9;padding-top:12px;margin-top:12px}.rules{border-top:1px solid #dce1d6;padding-top:18px;font-size:12px;line-height:1.9;color:#7b8574;margin-top:28px}.rules summary{cursor:pointer;color:#50634a}footer{font-size:10px;text-align:center;color:#a2aa98;margin:24px 0}@media(max-width:550px){main{padding:16px 12px}h1{font-size:17px}.table{padding:20px 7px 14px}.table p{font-size:13px}.hand{gap:2px}.hand .tile{width:calc((100vw - 76px)/13);max-width:36px;height:calc((100vw - 76px)/13 * 1.48);max-height:53px;padding:1px;border-radius:3px}.choices{gap:1px}.choice .tile{width:calc((100vw - 56px)/9);max-width:44px;height:calc((100vw - 56px)/9 * 1.42);max-height:62px;padding:2px}.choice{min-height:77px}.answer-title small{font-size:10px}.solution-title span{font-size:10px}.flow{gap:10px}.flow .tile{width:35px;height:49px}}

/* Keep the tile face opaque: source artwork contains transparent areas. */
.tile{padding:2px!important;background:#fffef9;border:1px solid #aeb8a7;border-radius:5px;box-shadow:0 3px 0 #bbc4ac,0 4px 3px #15261922;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
.tile.called{background:#fff0bd;border:1px solid #c19432;outline:2px solid #d4a23f;outline-offset:1px;border-radius:5px}
.hand .tile{background:#fffef9;border-radius:4px}
.after-hand .tile{background:#fffef9;border-radius:4px;box-shadow:0 2px 0 #bbc4ac}


.all-forms-note{font-size:12px;color:#66765e;line-height:1.7}.call-group{margin-bottom:16px}.call-group h3{margin:0 0 16px;font-size:16px;color:#285e42}.call-variant{border-top:1px solid #e1e8da;margin-top:18px;padding-top:16px}.form-best{display:inline-block;font-size:10px;background:#fff1c8;color:#866620;border-radius:5px;padding:5px 7px;margin-bottom:12px}