:root{font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,-apple-system,sans-serif;color:#253d3b;--cream:#fff6df;--ink:#253d3b;--mint:#a5d7b8}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#293e3e}button{font:inherit;cursor:pointer;color:inherit;border:0;touch-action:manipulation}button:focus-visible{outline:3px solid #ffe04b;outline-offset:3px}button:disabled{cursor:default;opacity:.46}canvas{width:100%;height:100%;display:block;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none}#ui button{pointer-events:auto}header{position:absolute;inset:20px 24px auto;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.brand{display:flex;flex-direction:column;color:#fff6df;text-shadow:0 2px 6px #20362f}.brand small{letter-spacing:.2em;font-size:10px;font-weight:800}.brand strong{font-size:25px}.stats{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:800}.stats>*{background:#fff6e9eb;padding:11px 13px;border-radius:9px;box-shadow:0 3px 0 #1e3a3919}.stats b{font-variant-numeric:tabular-nums;font-size:22px;min-width:84px;text-align:center}.stats button{background:#46756c;color:white}#status{position:absolute;top:91px;left:50%;transform:translateX(-50%);font-size:12px;background:#273e3ddd;color:#fff6df;padding:7px 16px;border-radius:30px;max-width:90vw;white-space:nowrap}#rolePanel{position:absolute;top:138px;left:25px;width:260px;background:#fff6dfef;border-radius:3px 16px 16px 3px;border-left:5px solid #dca754;padding:14px 17px;box-shadow:0 8px 28px #172f3322}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.08em}p{margin:8px 0;font-size:12px;line-height:1.6}#readout{font-size:13px;line-height:1.8}#readout .clue{display:flex;justify-content:space-between;border-top:1px solid #dcd3b9;padding:4px 0}#moduleTabs{position:absolute;left:50%;transform:translateX(-50%);bottom:277px;display:flex;gap:6px}#moduleTabs button{border-radius:20px;padding:8px 16px;background:#203c3ad9;color:#fff6df;font-size:12px}#moduleTabs button.active{background:#ffe2a4;color:#253d3b}#moduleTabs button.done{background:#83c7ac;color:#19362f}#actionDock{position:absolute;bottom:133px;left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 34px));text-align:center;background:#fff6dfee;box-shadow:0 8px 30px #233c3430;border-radius:14px;padding:12px 18px}#moduleTitle{font-size:15px}#moduleHint{font-size:11px;margin:5px 0 9px;line-height:1.45}#actions{display:flex;gap:8px;justify-content:center}#actions button{min-width:52px;min-height:39px;border-radius:8px;background:#eadcbc;font-weight:850;font-size:18px;border-bottom:4px solid #c2ab80}#actions button:active{transform:translateY(2px);border-bottom-width:2px}#actions .hold{width:100%;background:#e8b45c;border-color:#b78338;font-size:14px}#actions .hold.charging{background:#94d4b2;border-color:#548d77}#signals{position:absolute;right:24px;top:138px;width:228px;background:#263d3ce8;color:#fff5db;border-radius:14px;padding:12px;pointer-events:auto}#signals small{font-size:11px;font-weight:800}#signalLog{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:35px;margin:8px 0;font-size:11px;line-height:1.4}#signalLog .chip{background:#fff4da;color:#314740;border-radius:6px;min-width:27px;padding:5px;text-align:center;font-weight:800}#signalLog .chip small{font-size:8px;display:block}#signalButtons{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}#signalButtons button{height:31px;border-radius:5px;font-size:13px;background:#fff4de;color:#283f38;font-weight:800}footer{position:absolute;bottom:19px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:15px}#roles{display:flex;gap:6px}#roles button{min-width:122px;text-align:left;border-radius:10px;background:#f4ecd9;padding:10px 13px;font-weight:850;box-shadow:0 4px 0 #273b3340}#roles small{display:block;font-size:9px;font-weight:500;margin-top:3px}#roles .active{background:#49776b;color:#fff6db;outline:2px solid #d9e0b5}.save{color:#fff3d2;text-align:right;font-size:11px;text-shadow:0 1px 4px #16342f}.save small{display:block;font-size:9px;margin-top:4px}#result,#helpPanel{pointer-events:auto;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:#fff4dc;padding:27px;border:6px double #bd9b56;border-radius:18px;width:min(430px,92vw);text-align:center;box-shadow:0 0 0 100vmax #16363273}#result h2,#helpPanel h2{margin:5px 0 12px;font-size:26px}#result button,#helpPanel button{padding:13px 24px;background:#487666;color:#fff4dc;border-radius:9px;font-weight:800;margin-top:15px}#result .stamp{font-size:11px;letter-spacing:.2em;color:#8c784e}#result .score{font-size:30px;margin:12px 0}.bookView #rolePanel{width:230px}.bookView #actionDock,.eyesView #actionDock{bottom:134px}.bookView #moduleTabs,.eyesView #moduleTabs{display:none}.danger #timer{color:#bc483d;background:#ffe1c1}.hidden{display:none!important}@media(max-width:740px){header{inset:12px 12px auto}.brand strong{font-size:19px}.brand small{font-size:8px;letter-spacing:.1em}.stats{gap:4px}.stats>*{padding:8px 7px;border-radius:7px;font-size:10px}.stats b{font-size:18px;min-width:60px}.stats #round{display:none}.stats #invite{font-size:10px}.stats #strikes{display:inline-block;padding:7px 5px;font-size:9px;white-space:nowrap}#status{top:70px;font-size:10px;padding:6px 10px}#rolePanel{top:105px;left:12px;width:180px;padding:10px 12px}.eyebrow{font-size:10px}#roleHint{font-size:10px;margin:5px 0;line-height:1.4}#readout{font-size:11px}.bookView #rolePanel{width:190px}#signals{right:12px;top:auto;bottom:119px;width:calc(100% - 24px);padding:8px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:5px}#signals small{font-size:9px}#signalLog{flex:1;min-height:22px;margin:0;font-size:9px}#signalLog .chip{min-width:23px;padding:3px}#signalButtons{width:100%;grid-template-columns:repeat(9,1fr);gap:3px}#signalButtons button{height:28px;font-size:11px}#moduleTabs{bottom:365px;gap:4px}#moduleTabs button{padding:7px 12px;font-size:10px}#actionDock{bottom:227px;padding:10px 14px;max-height:131px}#moduleHint{font-size:10px}#actions button{min-height:34px;min-width:47px;font-size:17px}footer{bottom:12px;left:12px;right:12px;flex-wrap:wrap;gap:8px}#roles{width:100%;gap:5px}#roles button{min-width:0;flex:1;padding:9px 8px;font-size:12px}#roles small{font-size:8px}.save{width:100%;font-size:9px;display:flex;justify-content:space-between}.save small{margin:0;font-size:9px}.bookView #actionDock,.eyesView #actionDock{bottom:227px}.eyesView #rolePanel{width:200px}.eyesView #readout .clue{padding:1px 0}.bookView #rolePanel{display:none}}
@media(max-height:620px) and (min-width:741px){#rolePanel,#signals{top:100px}#actionDock{bottom:95px}#moduleTabs{bottom:238px}footer{bottom:10px}#roleHint{font-size:10px}.bookView #actionDock,.eyesView #actionDock{bottom:95px}}

#signalButtons button{padding:0;white-space:nowrap;font-size:11px}#helpPanel [data-rules]{font-size:24px;line-height:1.65;letter-spacing:.2em}#helpPanel p{font-size:13px}

/* Visual round4: keep the established controls and manual path, lower the overlay noise. */
header{inset:18px 23px auto}.brand small{font-size:9px;letter-spacing:.17em}.brand strong{font-size:23px}.stats{gap:6px}.stats>*{border:1px solid #f7f2dd6e;box-shadow:0 2px 5px #22352f20;padding:9px 12px;background:#f6f0e2ed}.stats b{font-size:23px;color:#38584d}.stats button{background:#3f6861;border-color:#80a29466}
#status{top:83px;background:#2d4844e8;border:1px solid #79998a6b;padding:7px 14px;font-size:12px;box-shadow:0 2px 7px #172e3222}
#rolePanel{top:132px;width:242px;border:1px solid #d7d8cacc;border-left:4px solid #b88652;border-radius:4px 13px 13px 4px;padding:12px 14px;background:#f6f0dfe8;box-shadow:0 4px 17px #203a3322}
#roleHint{font-size:12px;color:#547066;line-height:1.55;margin:7px 0}#readout{font-size:14px}#readout>p{font-size:11px;margin-bottom:0;color:#6c7969}.eyesView #rolePanel{border-left-color:#65a28a}.bookView #rolePanel{border-left-color:#628f9a}.eyesView #readout .clue{padding:6px 0}.eyesView #moduleHint,.bookView #moduleHint{display:none}
#moduleTabs{bottom:253px;gap:3px;background:#2b4941df;border:1px solid #afc0a659;border-radius:23px;padding:4px}#moduleTabs button{padding:7px 16px;background:transparent;font-size:12px;border-radius:18px}#moduleTabs button.active{background:#e8d4a8;box-shadow:0 2px 3px #223d3233}#moduleTabs button.done{background:#a3c5ac;color:#2e4e3e}
#actionDock{bottom:133px;width:min(450px,calc(100vw - 34px));padding:11px 17px;border:1px solid #fff7e2b3;background:#f5efdee8;box-shadow:0 5px 20px #243e3530;border-radius:13px}#moduleTitle{font-size:14px}#moduleHint{font-size:12px;line-height:1.4;margin:5px 0 9px;color:#526a5e}#actions button{min-width:55px;min-height:40px;background:#e5ddc5;border-bottom-color:#bbae86;font-size:19px}#actions .hold{background:#d7b465;border-color:#a7844b}
#signals{top:auto;bottom:135px;right:25px;width:222px;background:#f1ebd9eb;color:#385247;border:1px solid #dce0c7b3;border-radius:13px;padding:10px;box-shadow:0 4px 18px #20393225}#signals>small{font-size:11px;letter-spacing:.05em;color:#5b7263}#signalLog:not(:has(.chip)){display:none}#signalLog{margin:7px 0 8px;min-height:0}#signalLog .chip{background:#d8e4cc;color:#385445}#signalButtons{gap:4px;margin-top:7px}#signalButtons button{height:31px;background:#fcf8ec;color:#3e5548;box-shadow:0 1px 0 #b3bda388;font-size:12px;border-radius:5px;border:1px solid #d3d8c177}#signalButtons button.color-signal{border-bottom:4px solid var(--signal-color);font-size:11px}
#roles button{box-shadow:0 3px 0 #233d3330;background:#eeeadb;border:1px solid #fcf5df99}#roles [data-role=hands].active{background:#9a744c;outline-color:#e7c78d}#roles [data-role=eyes].active{background:#4f806d;outline-color:#b5d3b5}#roles [data-role=book].active{background:#527b87;outline-color:#b9d6d6}#roles small{font-size:10px}.save{color:#edf0d7}
#helpPanel{max-height:calc(100svh - 42px);overflow:auto;border-width:3px;padding:25px 29px;background:#faf4e4;text-align:left}#helpPanel h2{font-size:23px}#helpPanel p{font-size:14px;line-height:1.7}#helpPanel [data-rules]{font-size:27px;line-height:1.55;background:#eef0de;border-left:3px solid #b7c6a4;border-radius:4px;padding:12px 17px;letter-spacing:.12em}#helpPanel button{display:block;margin:16px auto 0;min-height:43px}
@media(min-width:741px) and (max-width:1150px){#signals{right:14px;width:199px}#rolePanel{left:14px;width:220px}#actionDock{width:390px}#signalButtons button{font-size:11px}}
@media(max-width:740px){header{inset:10px 12px auto}.brand strong{font-size:19px}.brand small{font-size:8px}.stats{gap:4px}.stats>*{padding:8px 6px;font-size:10px}.stats b{font-size:19px;min-width:62px}.stats #strikes{font-size:10px;padding:7px 5px}#status{top:67px;font-size:11px;padding:6px 11px}#rolePanel{top:103px;left:12px;width:176px;padding:9px 11px}.eyebrow{font-size:11px}#roleHint{font-size:10px;margin:5px 0;line-height:1.4}#readout>p{font-size:10px}.eyesView #rolePanel{width:212px}.eyesView #readout{font-size:12px}.eyesView #readout .clue{padding:3px 0}.bookView #rolePanel{display:none}#signals{bottom:116px;right:12px;width:calc(100% - 24px);padding:7px 9px;display:flex;gap:4px;background:#f1ebd9ed}#signals>small{font-size:10px}#signalLog{margin:0;min-height:0;flex:1}#signalLog .chip{padding:3px;font-size:10px}#signalButtons{grid-template-columns:repeat(9,1fr);gap:3px;margin-top:1px}#signalButtons button{height:30px;font-size:12px}#signalButtons button.color-signal{font-size:11px;border-bottom-width:3px}#moduleTabs{bottom:352px;padding:3px}#moduleTabs button{padding:7px 13px;font-size:11px}#actionDock{bottom:221px;padding:9px 14px;width:calc(100vw - 30px);max-height:127px}#moduleTitle{font-size:14px}#moduleHint{font-size:11px;margin:4px 0 8px}#actions button{min-height:38px;min-width:52px;font-size:19px}.bookView #actionDock,.eyesView #actionDock{bottom:221px}.bookView #actionDock #moduleTitle,.eyesView #actionDock #moduleTitle{font-size:12px;display:block;margin-bottom:7px}.bookView #actions button,.eyesView #actions button{min-height:39px}footer{bottom:11px}#roles button{padding:9px 8px;font-size:12px}#roles small{font-size:9px}.save{font-size:9px}.save small{font-size:9px}#helpPanel{padding:22px 21px;max-height:calc(100svh - 28px)}#helpPanel h2{font-size:21px}#helpPanel p{font-size:13px;line-height:1.65}#helpPanel [data-rules]{font-size:25px;padding:10px 12px}}
@media(max-height:620px) and (min-width:741px){#rolePanel{top:103px}#signals{bottom:95px}#moduleTabs{bottom:227px}#actionDock{bottom:103px}.bookView #actionDock,.eyesView #actionDock{bottom:103px}}
/* Keep each module name together at narrow mobile widths. */
#moduleTabs{width:max-content;max-width:calc(100vw - 24px)}#moduleTabs button{white-space:nowrap;flex-shrink:0}

/* Small-screen focus: one clue, one device, one action. */
header{inset:16px 18px auto;align-items:center}.brand small{display:none}.brand strong{font-size:22px}.stats{gap:5px}.stats>*{padding:7px 9px}.stats b{font-size:20px;min-width:68px}#round{display:none}#status{top:73px;max-width:calc(100% - 30px);font-size:11px}#roleHint{display:none}#signalButtons{max-height:80px;overflow:auto}#signals{max-height:130px;overflow:auto}footer .save{display:none}.solo #roles,.solo #signals{display:none!important}.solo #rolePanel{left:18px;top:110px;right:auto;width:260px;padding:14px 16px;border-radius:14px;background:#fff6e6ec}.solo #roleTitle{font-size:11px}.solo #readout{font-size:12px;line-height:1.6}.solo #readout p{margin:7px 0 0}.solo #readout .clue{padding:3px 0}.solo #readout b{font-size:13px}.solo #moduleTabs{left:50%;transform:translateX(-50%);bottom:160px;top:auto;width:min(390px,calc(100% - 30px));justify-content:center}.solo #moduleTabs button{flex:1;padding:10px 8px;font-size:12px}.solo #actionDock{left:50%;right:auto;transform:translateX(-50%);width:min(420px,calc(100% - 30px));bottom:20px;top:auto;padding:14px;border-radius:16px}.solo #moduleTitle{display:none}.solo #moduleHint{font-size:11px;margin:0 0 8px}.solo #actions{gap:8px}.solo #actions button{min-height:48px;flex:1}.solo footer{display:none}
@media(max-width:740px){header{inset:14px 15px auto}.brand strong{font-size:19px}.stats>*{font-size:10px;padding:7px}.stats b{font-size:18px;min-width:62px}#help{width:30px;height:32px}#status{top:63px;font-size:10px}.solo #rolePanel{top:96px;left:15px;right:15px;width:auto;max-height:150px;overflow:auto;padding:12px 14px}.solo #roleTitle{display:none}.solo #readout{display:grid;grid-template-columns:1fr;gap:0}.solo #readout .clue{display:flex;justify-content:space-between;gap:10px}.solo #readout p{font-size:11px;margin:4px 0}.solo #moduleTabs{bottom:151px;gap:5px}.solo #actionDock{bottom:max(18px,env(safe-area-inset-bottom));padding:12px}.solo #moduleHint{font-size:10px}.solo #actions button{min-height:48px}body:not(.solo) #signals{bottom:184px;right:15px;max-height:90px;width:170px}body:not(.solo) #signalTitle{cursor:pointer}#signals{pointer-events:auto}#signals summary{font-size:11px;padding:5px}}
@media(max-height:500px){.solo #rolePanel{width:220px;left:15px;right:auto;top:90px;max-height:160px}.solo #moduleTabs{width:300px;left:auto;right:15px;transform:none;bottom:138px}.solo #actionDock{width:300px;left:auto;right:15px;transform:none;bottom:15px}}

@media(max-width:740px){body:not(.solo) #signals{bottom:88px;left:15px;right:15px;width:auto;max-height:120px;display:block;overflow:auto}body:not(.solo) #signalButtons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-height:none;gap:5px}body:not(.solo) #signalButtons button{min-width:0;padding:7px 2px;font-size:11px}body:not(.solo) #signalLog{max-height:33px;overflow:auto}body:not(.solo) #signals:not([open]){max-height:38px}body:not(.solo) #actionDock{bottom:220px}body:not(.solo) #moduleTabs{bottom:351px}}