:root{
  --blue:#2a5ca8; --deep:#1b4f95; --line:#23518c; --white:#fff; --panel:#f8f8f8;
}
*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:var(--blue)}
body{position:relative;color:#080808}.bg-doodles{position:fixed;inset:0;background-color:#2a5ca8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='165' viewBox='0 0 220 165'%3E%3Cg fill='none' stroke='%231b4f95' stroke-width='4' opacity='.72'%3E%3Cpath d='M9 34l21-15 19 15-6 21-27 3zM72 15q20 11 36 0l4 18-21 10-19-10zM147 8l7 12 14 2-10 10 3 14-14-7-12 7 3-14-10-10 14-2zM15 112q18-15 35 0-17 20-35 0zM70 84h29v23H70zM131 92q20-14 40 0M138 100q13 14 26 0M188 109l18-20 8 9-17 20zM28 72q20 0 20 18t-20 18M113 120l14-21 14 21zM164 136q18-18 36 0-18 18-36 0z'/%3E%3C/g%3E%3C/svg%3E");background-size:220px 165px;z-index:-2}
.game-shell{height:100vh;padding:8px 29px 28px;display:grid;grid-template-rows:76px 49px 1fr 56px;gap:4px}
.top-logo{height:76px;display:flex;align-items:center;font-family:'Comic Sans MS','Trebuchet MS',sans-serif;font-size:53px;font-weight:900;letter-spacing:-5px;color:#fff;text-shadow:-3px -3px #000,3px -3px #000,-3px 3px #000,3px 3px #000;user-select:none;white-space:nowrap;align-self:end}.top-logo .s{display:inline-block;transform:rotate(-3deg)}.top-logo .red{color:#ef2b2b}.top-logo .orange{color:#ff8a00}.top-logo .yellow{color:#f4d600}.top-logo .green{color:#53d20d}.top-logo .cyan{color:#00d0c7}.top-logo .blue{color:#1d79ff}.top-logo .violet{color:#7c28df}.top-logo .dot,.top-logo .io{color:#fff}.top-logo .pencil{color:#ff9c4f;font-size:42px;margin-left:8px;transform:rotate(-17deg)}
.topbar{height:49px;background:#fff;border-radius:5px 5px 0 0;display:grid;grid-template-columns:53px 175px 1fr 56px;align-items:center;overflow:hidden}.timer{width:47px;height:47px;border:4px solid #111;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;margin-left:2px;position:relative}.timer:after{content:'';position:absolute;width:10px;height:10px;border-left:4px solid #111;border-bottom:4px solid #111;bottom:-6px;left:2px;transform:rotate(-18deg)}.round{font-weight:700;font-size:18px}.prompt{text-align:center;line-height:1.1}.prompt small{display:block;font-size:13px;font-weight:800}.prompt strong{font-size:21px}.gear{border:0;background:white;font-size:39px;cursor:pointer;height:100%}
.game-grid{min-height:0;display:grid;grid-template-columns:202px minmax(500px,1fr) 300px;gap:5px}.players{background:transparent}.player{height:49px;background:#fff;border-radius:2px;margin-bottom:1px;display:grid;grid-template-columns:52px 1fr 43px;align-items:center;position:relative;overflow:hidden}.rank{font-weight:700;font-size:16px;align-self:start;margin:8px 0 0 7px}.player b{font-size:14px;display:block;text-align:center}.player small{font-size:12px;display:block;text-align:center;margin-top:3px}.player.me b{color:#2c73dd}.avatar{font-size:34px;text-align:center;line-height:42px;filter:saturate(1.2)}.brown{color:#6d3521}.orangeface{color:#f08a00}.whiteface{color:#fff;text-shadow:-2px -2px #000,2px -2px #000,-2px 2px #000,2px 2px #000}.mini-pencil{position:absolute;right:38px;bottom:4px;color:#f0a020;font-size:25px;transform:rotate(-15deg)}
.board-wrap{min-width:0;min-height:0;background:#fff;border-radius:2px;overflow:hidden;position:relative}.board-wrap canvas{width:100%;height:100%;display:block;background:#fff;touch-action:none;cursor:crosshair}
.chat{background:#fff;border-radius:2px;display:grid;grid-template-rows:1fr 34px;min-height:0}.chat-log{padding:250px 7px 8px;overflow:auto;font-size:14px}.chat-log p{margin:10px 0;color:#2d75df;font-weight:600}.guess-form{padding:3px}.guess-form input{width:100%;height:30px;border:1px solid #888;border-radius:2px;padding:4px;font-size:14px}
.toolbar-row{display:grid;grid-template-columns:202px minmax(500px,1fr) 300px;gap:5px}.tools{height:50px;display:flex;align-items:center;justify-content:flex-start;gap:5px}.color-preview{width:50px;height:50px;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,#111 0 52%,#fff 52%)}.color-preview span{display:block;width:100%;height:100%}.palette{width:310px;height:50px;display:grid;grid-template-columns:repeat(14,1fr);border-radius:4px;overflow:hidden}.palette button{border:0;padding:0;cursor:pointer}.size,.tool{width:49px;height:49px;border:0;border-radius:5px;background:#fff;cursor:pointer;position:relative;display:grid;place-items:center}.size #sizeDot{width:13px;height:13px;background:#111;border-radius:50%}.tool{font-size:29px}.tool kbd{position:absolute;left:4px;top:3px;background:none;border:0;font-family:Arial;font-size:13px}.tool.active{background:#9e45db}.tool.active kbd{color:#111}.toolbar-gap{width:82px}.toolbar-gap.wide{width:81px}.size-popup{position:fixed;bottom:79px;background:#fff;border:1px solid #bbb;border-radius:6px;padding:4px;box-shadow:0 3px 14px #0005;display:flex;gap:3px;z-index:10}.size-popup button{width:48px;height:48px;border:0;background:#eee;border-radius:4px;display:grid;place-items:center}.size-popup i{background:#111;border-radius:50%;display:block}
@media(max-width:900px){.game-shell{padding:6px;grid-template-rows:54px 44px 1fr 52px}.top-logo{font-size:38px;height:54px}.game-grid,.toolbar-row{grid-template-columns:155px 1fr 220px}.player{grid-template-columns:42px 1fr 36px}.palette{width:210px}.toolbar-gap,.toolbar-gap.wide{width:20px}}