:root{--paper:#fff9f1;--ink:#202020;--blue:#8fd3ff;--mint:#b8f2c8;--pink:#ffc9de;--yellow:#ffe78a;--lav:#cdb8ff;--red:#ff8a8a;--line:#9fc6e8;--margin:#e98080}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Segoe UI",sans-serif;background:#efe2cc;color:var(--ink)}button,input,select{font:inherit}button{border:3px solid var(--ink);background:var(--yellow);border-radius:18px;padding:13px 16px;font-weight:900;box-shadow:4px 4px 0 #0002}button.secondary{background:white}button.danger{background:var(--red)}button.good{background:var(--mint)}button.blue{background:var(--blue)}input,select{width:100%;font-size:18px;border:3px solid var(--ink);border-radius:16px;padding:14px;background:white}.app{min-height:100vh;padding:16px}.page{max-width:900px;margin:0 auto;background:var(--paper);border-radius:24px;border:4px solid var(--ink);box-shadow:10px 10px 0 #0002;padding:24px;position:relative;overflow:hidden}.page:before{content:"";position:absolute;left:54px;top:0;bottom:0;border-left:3px solid var(--margin);opacity:.5}.ruled{background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 32px}.content{position:relative;z-index:1}.title{font-size:38px;line-height:1;font-weight:1000;margin:0 0 8px}.subtitle{font-size:17px;opacity:.75}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.grid{display:grid;gap:14px}.grid2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.card{background:white;border:3px solid var(--ink);border-radius:20px;padding:16px;box-shadow:4px 4px 0 #0001}.sticky{background:var(--yellow);transform:rotate(-1deg)}.badge{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:5px 10px;background:white;font-weight:900}.timer{font-size:96px;font-weight:1000;text-align:center;line-height:1}.progress{height:22px;border:3px solid var(--ink);border-radius:999px;background:white;overflow:hidden}.bar{height:100%;background:var(--mint);width:0}.words{display:grid;gap:8px;margin-top:14px}.word{padding:10px 14px;border:2px solid #0002;border-radius:14px;background:#fff}.word.active{border:3px solid var(--ink);background:var(--pink);font-weight:1000;transform:scale(1.02)}.small{font-size:13px;opacity:.75}.qr{width:230px;height:230px;border:4px solid var(--ink);border-radius:18px;background:white;padding:8px}.muted{opacity:.55}.canvasWrap{background:white;border:4px solid var(--ink);border-radius:20px;overflow:hidden;touch-action:none}.drawCanvas{display:block;width:100%;height:420px;background:white;touch-action:none}.thumb{width:100%;height:180px;background:white;border:3px solid var(--ink);border-radius:16px}.scoreBtn{min-width:96px}.topbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.hidden{display:none!important}@media(max-width:600px){.page{padding:18px}.title{font-size:30px}.timer{font-size:76px}.drawCanvas{height:360px}.page:before{left:34px}}

.bigThumb{height:360px;max-height:50vh}
.chatBox{max-height:220px;overflow:auto;background:#fff9f1;border:2px dashed #0004;border-radius:14px;padding:10px;margin-bottom:10px}.chatMsg{padding:7px 8px;border-bottom:1px solid #0001}.chatMsg:last-child{border-bottom:0}.chatSend{align-items:stretch}.chatSend input{flex:1;min-width:220px}.chatSend button{width:auto}

/* Cloud 1.9 stabilization: keep game controls from becoming browser zoom targets. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}body{overscroll-behavior:none}button,.badge,.card,.word{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}button{min-height:52px;min-width:52px}.drawNav button{flex:1;min-width:140px}.canvasWrap,.drawCanvas{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.drawCanvas{cursor:crosshair;image-rendering:auto}.timer [data-timer],[data-timer]{font-variant-numeric:tabular-nums}@media(max-width:600px){button{padding:15px 18px}.drawNav{gap:14px}.drawNav button{font-size:17px}}

/* Cloud 1.10: make word navigation obvious and hard to miss on phones. */
.wordCard{margin-bottom:10px}.drawNav{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;position:sticky;bottom:8px;z-index:20}.wordNextBig{width:100%;min-height:92px;font-size:25px;line-height:1.05;border-width:5px;border-radius:24px;box-shadow:6px 6px 0 #0003;touch-action:manipulation}.wordNextBig span{font-size:16px;font-weight:800;opacity:.85}.wordPrevSmall{width:100%;min-height:56px;font-size:15px;opacity:.88}.drawNav button{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.canvasWrap{margin-bottom:8px}@media(max-width:600px){.drawCanvas{height:55vh;min-height:330px;max-height:520px}.wordNextBig{min-height:104px;font-size:27px}.page{padding-bottom:28px}}