:root{--cream:#faf6e8;--ink:#173d2c;--gold:#e7c47c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#0b2b21;color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app{height:100%;max-width:1050px;margin:auto;display:flex;flex-direction:column;min-height:0;background:var(--cream)}.topbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;background:#123c2c;color:#fff8e6}.topbar span{font-size:8px;letter-spacing:1.5px;color:#d6cda7}h1{font-size:23px;margin:3px 0 0;letter-spacing:2px}.topbar nav{display:flex;gap:7px}button{font:inherit;touch-action:manipulation;cursor:pointer}.topbar button{padding:9px 11px;border:1px solid #c8d7bc66;background:#ffffff0c;border-radius:8px;color:#fff6dc;font-size:11px}.scores{display:grid;gap:5px;padding:6px 8px 4px;flex:none;min-height:43px}.score{min-width:0;border:1px solid #e2e2d2;border-radius:8px;padding:5px 7px;font-size:10px;background:#fff;display:flex;align-items:center;gap:7px}.score.active{border-color:var(--player);box-shadow:inset 0 0 0 1px var(--player);background:#fffbea}.score.out{opacity:.42}.disc{width:12px;height:12px;border-radius:50%;background:var(--player);box-shadow:inset 2px 2px 2px #fff8;flex:none}.score-text{display:flex;flex-direction:column;gap:3px;min-width:0}.score-name{font-weight:bold}.score small{font-size:9px;white-space:nowrap;color:#76826f}.turnbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:29px;padding:4px 11px 6px;font-size:12px;flex:none}.turnbar strong{color:#111}.turnbar span{font-size:11px;background:#e5ebd8;padding:5px 8px;border-radius:5px;color:#304734;white-space:nowrap}.arena-wrap{position:relative;flex:1;min-height:0;margin:0 5px;background:#143e2b;border-radius:12px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.arena-wrap canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:-3px}.message{flex:none;min-height:24px;margin:0;padding:5px 9px 3px;font-size:11px;line-height:15px;color:#526647;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}footer{flex:none;text-align:center;font-size:9px;line-height:18px;color:#768069;padding-bottom:2px}dialog{width:min(92vw,480px);max-height:87dvh;overflow:auto;border:1px solid #d3bf87;background:var(--cream);color:var(--ink);padding:29px;border-radius:19px;box-shadow:0 20px 70px #0006}dialog::backdrop{background:#051e17bc}dialog h2{font-family:Georgia,serif;font-size:30px;line-height:1.1;font-weight:400;margin:12px 0 17px}dialog p,dialog li{font-size:14px;line-height:1.65}dialog ol{padding-left:20px}dialog li{margin:8px 0}.eyebrow{font-size:9px;letter-spacing:2px;color:#7d815f;font-weight:bold}label{display:block;font-size:12px;font-weight:bold;margin:20px 0 8px}select{font:inherit;width:100%;border:1px solid #c0caae;border-radius:8px;background:#fff;padding:11px;color:var(--ink);font-size:16px}.primary{display:block;margin-top:20px;width:100%;padding:13px;border:0;background:var(--ink);color:white;border-radius:8px;font-weight:bold;font-size:14px}button:focus-visible,canvas:focus-visible,select:focus-visible{outline:3px solid #af812d;outline-offset:2px}@media(max-width:450px){.topbar{padding:7px 10px}.topbar span{font-size:7px;letter-spacing:1px}h1{font-size:19px}.topbar button{font-size:10px;padding:8px}.score{padding:5px;gap:5px}.score-name{font-size:9px}.score small{font-size:8px}.disc{width:10px;height:10px}.scores{min-height:41px}.message{font-size:10px}.turnbar{font-size:11px;min-height:28px}footer{font-size:8px;line-height:15px}}@media(max-height:500px){.topbar{padding:4px 10px}.topbar span{display:none}h1{font-size:15px;margin:0}.topbar button{padding:5px 9px}.scores{padding-top:3px;min-height:27px}.score-text{flex-direction:row}.turnbar{padding-block:2px;min-height:25px}.message{min-height:19px;padding-block:2px}footer{display:none}dialog{padding:20px}}