/* Brand layer for the game app (play.html), October 2026 brand system.
   Loaded AFTER play.html's inline styles and lobby-stage.css, so it only has to
   restate what changes: violet surface, white cards, Inter/Bricolage, soft
   borders and soft shadows instead of the old 3px ink outline + hard offset.
   Contract from before still holds: white text on the violet page, ink text on
   white panels. Served max-age=86400: BUMP ?v= in play.html on every edit. */

@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-var-latin.woff2) format('woff2-variations')}
@font-face{font-family:'Bricolage Variable';font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/bricolage-var-latin.woff2) format('woff2-variations')}

:root{
  --bg:#783FE8; --panel:#fff; --panel-2:#F8F7FC; --ink:#241C35; --muted:#6B6478;
  --green:#1E9E6D; --dgreen:#147D55; --red:#F45C51; --blue:#3B6FD0; --yellow:#F2C14E;
  --violet:#783FE8; --violet-700:#6630C9; --violet-50:#EEE7FC; --coral:#F45C51;
  --line:#DDD7E7; --line-strong:#92859F;
  --shadow:0 1px 2px rgba(36,28,53,.08),0 18px 40px -16px rgba(20,10,50,.45);
  --sh-sm:0 1px 2px rgba(36,28,53,.08),0 4px 12px -4px rgba(36,28,53,.14);
  --display:'Bricolage Variable','Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter Variable',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{font-family:var(--body);background-color:var(--bg);background-image:none;-webkit-font-smoothing:antialiased}
body::before{opacity:.32}
body::after{opacity:.22}
.bgshapes{opacity:.5}
h1,h2,h3,.room-code span,.ls-info h3,.podium h2{font-family:var(--display);letter-spacing:-.01em}

/* Wordmark: the supplied all-white master on violet (brand guide p.09). */
.logo{margin:24px 0 16px}
.logo img{display:block;width:240px;height:auto;margin:0 auto}
.logo.small img{width:180px}

/* Structural outlines: soft hairline instead of a 3px ink pen line. */
.card,.topbar,.canv-wrap,.avatar-box,.lobby-grid,.join-banner,.acctbar .who,.customcol,
.ls-stage,.ls-seat,.ls-tile,.ls-menu,.ls-step,.ls-tool,.ls-arrow,.ls-demo,.ls-bub,.ls-em,
.rps-me,.lu-roll,.lu-pickbtn,.chat,.rail,.toolbar,.p-row,.tb-side,.modal .box{
  border-width:1px;border-color:rgba(36,28,53,.08)}
.card,.topbar,.canv-wrap,.modal .box,.chat,.rail,.toolbar{box-shadow:var(--shadow)}
.card{border-radius:24px}
.topbar,.canv-wrap,.chat,.rail,.toolbar{border-radius:20px}
.p-row,.tb-side,.ls-seat,.ls-tile,.ls-step,.ls-tool,.ls-arrow,.ls-em,.ls-menu,.lu-roll,.lu-pickbtn,.lsd-cards span,
.acct-btn,.acctbar .who,.game-row select{box-shadow:var(--sh-sm)}
.ls-tile:hover,.ls-seat.tap:hover{box-shadow:0 8px 20px -8px rgba(36,28,53,.3)}
.join-banner{border-style:dashed;border-color:var(--line-strong);border-width:1.5px}
.ls-seat.open{border:1.5px dashed var(--line-strong)}
.avatar-box,.lobby-grid,.ls-stage{background:var(--panel-2)}

/* Fields: 48px, 12px radius, strong border, violet focus ring. */
.land-card input[type=text],.set-grid select,.game-row select,.chat input,.chat-inp,input[type=text],select,textarea{
  border:1.5px solid var(--line-strong);border-radius:12px;font-family:var(--body);color:var(--ink)}
.land-card input[type=text]{min-height:52px;font-weight:600}
.land-card input[type=text]:focus,input[type=text]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(120,63,232,.18)}

/* Buttons: no outline, no hard offset, 12px radius, 600-700 labels. */
button{border:0;box-shadow:none;border-radius:12px;font-family:var(--body);font-weight:700;
  transition:background-color .14s,transform .14s,box-shadow .14s,filter .14s}
button:hover{transform:none;box-shadow:none;filter:brightness(1.06)}
button:active{transform:translateY(1px);box-shadow:none}
button:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.btn-play,.btn-start{background:var(--violet);color:#fff;border-radius:14px;box-shadow:0 8px 18px -8px rgba(120,63,232,.8)}
.btn-room{background:var(--ink);color:#fff}
.btn-event{background:#fff;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-event small{color:var(--muted)}
.btn-copy{background:var(--violet-50);color:var(--violet-700)}
.avatar-box .arrow,.avatar-box .dice{color:var(--ink);filter:none}
.land-or{color:var(--muted)}

/* Small drawn parts inside the lobby demos keep an outline, just thinner. */
.lsd-bars i,.lsd-cards span,.lsd-dice i,.lsd-wave .knob,.lsd-wave .track,.lu-pickbtn .pip{border-width:2px}

/* Page-level text on violet. */
.footnote{color:rgba(255,255,255,.82);font-weight:500;line-height:1.6}
.footnote a{color:#fff!important;font-weight:600!important;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.overlay{background:rgba(36,28,53,.9);color:#fff}

@media (prefers-reduced-motion:reduce){button{transition:none}}

/* Lobby: selected game tile and switches in brand colour. */
.ls-tile.on{background:var(--violet-50);border-color:var(--violet);box-shadow:0 0 0 2px var(--violet),0 10px 22px -10px rgba(120,63,232,.6)}
.mode-row .chk input[type=checkbox],.set-grid .chk input[type=checkbox]{background:#DDD7E7;border:0;width:46px;height:26px}
.mode-row .chk input[type=checkbox]::after,.set-grid .chk input[type=checkbox]::after{border:0;top:4px;left:4px;box-shadow:0 1px 3px rgba(36,28,53,.3)}
.mode-row .chk input[type=checkbox]:checked,.set-grid .chk input[type=checkbox]:checked{background:var(--violet)}
.mode-row .chk input[type=checkbox]:checked::after,.set-grid .chk input[type=checkbox]:checked::after{transform:translateX(20px)}
.mode-row .chk input[type=checkbox]:focus-visible,.set-grid .chk input[type=checkbox]:focus-visible{outline-color:var(--violet)}

/* In-game accents: word picks, room chip, brush size. */
.word-choices button{background:#fff;color:var(--ink);font-size:17px;padding:12px 22px;border-radius:14px}
.word-choices button:hover{background:var(--violet-50);filter:none}
#roomchip{border:1.5px solid var(--line);color:var(--violet-700);background:var(--violet-50);border-radius:10px}
#t-size{accent-color:var(--violet)}

/* ======================================================================
   Background (whole app): flat brand violet, the guide's cropped coral and
   light-violet shapes, and a faint dot grid. Replaces the doodle wallpaper
   and floating shapes; static, so nothing moves behind active play.
   ====================================================================== */
body{background-color:#783FE8;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.2px,transparent 1.4px);
  background-size:26px 26px;background-attachment:fixed}
body::before,body::after{background-image:none!important;animation:none!important;opacity:1;border-radius:50%}
body::before{top:auto;left:-220px;bottom:-260px;width:560px;height:560px;background:#F45C51}
body::after{left:auto;right:-300px;top:-320px;width:820px;height:820px;background:#8C5AF0}
.bgshapes{display:none}
@media (max-width:700px){body::before{width:300px;height:300px;left:-150px;bottom:-170px}body::after{width:440px;height:440px;right:-220px;top:-240px}}

/* ======================================================================
   Game stage
   ====================================================================== */
#scr-game .logo.small{display:none}
#scr-game .game-wrap{gap:12px;margin-top:14px}

/* Header bar */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;border:0;border-radius:20px;background:#fff}
.tb-mark{width:22px;height:auto;flex:none}
.timer{width:48px;height:48px;border:0;border-radius:14px;background:var(--violet-50);color:var(--violet-700);
  font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.timer.hurry{background:#FDE9E7;color:#C93A30;border:0}
.roundlbl{font:600 13px/1.2 var(--body);color:var(--muted)}
.wordbar .wb-label{font:600 11px/1 var(--body);letter-spacing:.12em;color:var(--muted)}
.wordbar .wb-word{font:800 26px/1.15 var(--display);letter-spacing:.14em;color:var(--ink);margin-top:4px}
.wordbar .wb-word small,.wordbar .wb-word sup{color:var(--violet);font-family:var(--body);letter-spacing:0}
.roomchip{font:700 12.5px/1 var(--body);letter-spacing:.04em;padding:10px 12px}
.btn-leave{background:#FDE9E7;color:#B5352C;font-weight:700;padding:10px 14px;border-radius:12px}
.btn-leave:hover{background:#FBD5D1}

/* Players: one panel with a header, flat rows inside */
.players{background:#fff;border-radius:20px;padding:10px;gap:4px;box-shadow:var(--shadow)}
.players::before{content:"Players";display:block;padding:6px 8px 8px;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.p-row{box-shadow:none;border:0;border-radius:14px;background:transparent;padding:6px 8px;min-height:52px;gap:10px;transition:background-color .14s}
.p-row:hover{background:#F8F7FC}
.p-row canvas{order:-1;width:40px;height:40px;border-radius:50%;background:#F8F7FC}
.p-row .info{order:0}
.p-row .nm{font:650 14px/1.2 var(--body);color:var(--ink)}
.p-row .nm .you{color:var(--violet-700);font-weight:600}
.p-row .pts{font:500 12.5px/1.3 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.p-row .rank{order:2;width:auto;min-width:28px;text-align:right;font:700 12px/1 var(--body);color:#A39DB0}
.p-row:first-of-type .rank{color:#C98A12}
.p-row .pencil-ic{order:1;font:700 11px/1 var(--body);color:#fff;background:var(--violet);border-radius:999px;padding:5px 8px}
.p-row.guessed{background:#E2F3EB}
.p-row.guessed .pts{color:#147D55;font-weight:600}
.p-row.tm0{border-left:0;box-shadow:inset 3px 0 0 #F45C51}
.p-row.tm1{border-left:0;box-shadow:inset 3px 0 0 #3B6FD0}

/* Tool rail */
.rail{background:#fff;border:0;border-radius:20px;padding:8px;gap:6px}
.tool{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink)}
.tool:hover{background:#F8F7FC;filter:none}
.tool.sel{background:var(--violet);color:#fff;border:0}
.tool .ti{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#t-clear{color:#B5352C}
#t-clear:hover{background:#FDE9E7}
.railsep{width:28px;height:1px;background:var(--line);margin:4px 0}

/* Canvas */
.canv-wrap{border:0;border-radius:20px;overflow:hidden}

/* Palette + size */
.toolbar{background:#fff;border:0;border-radius:20px;padding:12px 16px;gap:18px;margin-top:12px}
.swatches{grid-template-columns:repeat(11,24px);gap:6px}
.sw{width:24px;height:24px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(36,28,53,.14);transition:transform .14s}
.sw:hover{transform:scale(1.12)}
.sw.sel{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--violet);transform:scale(1.08)}
.customcol{width:36px;height:36px;border-radius:50%;border:0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(36,28,53,.14)}
.sizelbl{font:600 12px/1 var(--body);letter-spacing:.08em;color:var(--muted)}
#t-size{accent-color:var(--violet)}
.sizedot{border:1px solid var(--line)!important;background:#F8F7FC}

/* Chat */
.chat{border:0;border-radius:20px;background:#fff}
.chat::before{content:"Chat and guesses";flex:0 0 auto;padding:16px 16px 10px;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
#chatlog{padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.msg{padding:7px 10px;border-radius:12px;font:400 14px/1.4 var(--body);color:var(--ink);background:transparent}
.msg:nth-child(odd){background:transparent}
.msg b{font-weight:650;color:var(--violet-700)}
.msg.sys-g,.msg.sys-r,.msg.sys-y,.msg.sys-b{font:600 12.5px/1.35 var(--body);text-align:center;padding:6px 10px}
.msg.sys-g{background:#E2F3EB;color:#147D55}
.msg.sys-r{background:#FDE9E7;color:#B5352C}
.msg.sys-y{background:#FBEEDC;color:#8A4B00}
.msg.sys-b{background:#EEE7FC;color:#6630C9}
#chatin{margin:10px;width:calc(100% - 20px);min-height:46px;border:1.5px solid var(--line-strong);border-radius:12px;padding:0 14px;font:500 15px/1 var(--body);background:#fff}
#chatin:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(120,63,232,.18);outline:none}

/* Overlays (word choice, round results) */
.overlay{background:rgba(36,28,53,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}

/* Desktop stage layout */
@media (min-width:981px){
  #scr-game .game-wrap{width:min(1400px,96vw)}
  #scr-game .main{grid-template-columns:248px minmax(0,1fr) 300px;gap:14px;align-items:stretch}
  #scr-game .players{align-self:start;max-height:calc(var(--vvh,100dvh) - 130px);overflow:auto}
  #scr-game .drawarea{gap:12px}
}
.p-row{position:relative}
.p-row .pencil-ic{position:absolute;left:4px;top:40px;font-size:9.5px;padding:3px 6px;box-shadow:0 0 0 2px #fff;letter-spacing:.02em}
body::before{width:440px;height:440px;left:-200px;bottom:-230px}
@media (min-width:981px){#scr-game .main{grid-template-columns:264px minmax(0,1fr) 300px}}

/* Game stage on tablets and phones (layout itself comes from play.html). */
@media (max-width:980px){
  .players::before{display:none}
  .players{padding:6px;border-radius:16px}
  .p-row{flex:0 0 auto}
  .chat::before{padding:12px 14px 8px}
}
@media (max-width:600px){
  .tb-mark{display:none}
  .topbar{gap:8px;padding:8px 10px;border-radius:16px}
  .timer{width:40px;height:40px;font-size:17px;border-radius:12px}
  .roomchip{padding:8px 9px;font-size:11px}
  .btn-leave{padding:8px 10px;font-size:12px}
  .wordbar .wb-word{font-size:20px}
  .rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;border-radius:16px;padding:6px;min-width:0;max-width:100%}
  #scr-game .main{grid-template-columns:minmax(0,1fr)}
  #scr-game .boardcol,#scr-game .drawarea{min-width:0}
  .railsep{width:1px;height:28px;margin:0 2px;flex:0 0 auto}
  .tool{width:40px;height:40px;flex:0 0 auto}
  .toolbar{padding:10px 12px;gap:12px;border-radius:16px}
  .swatches{grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;width:100%}
  .sw{width:auto;height:auto;aspect-ratio:1}
  .canv-wrap{border-radius:16px}
}

/* Game stage v2 (2026-10-31 feedback): logo centred above the stage, and the
   board gets the width. Side panels are narrower so the 4:3 canvas grows. */
#scr-game .logo.small{display:block;margin:14px 0 2px}
#scr-game .logo.small img{width:200px}
.tb-mark{display:none}
@media (min-width:981px){
  #scr-game .game-wrap{width:min(1640px,98vw);margin-top:10px}
  #scr-game .main{grid-template-columns:minmax(176px,210px) minmax(0,1fr) minmax(220px,268px);gap:10px}
  #scr-game .drawarea{gap:10px}
  .p-row{gap:8px;padding:6px}
  .p-row canvas{width:34px;height:34px}
  .p-row .pencil-ic{top:34px;left:2px}
}
@media (min-width:1500px){
  #scr-game .main{grid-template-columns:230px minmax(0,1fr) 290px}
}
@media (max-width:600px){#scr-game .logo.small{display:none}}
@media (min-width:981px){
  #scr-game .drawarea{justify-content:center}
  #scr-game .canvcol{max-width:calc((var(--vvh,100dvh) - 250px) * 4 / 3)}
}
/* Laptop widths: Players stacks above Chat in one right column, the board takes the rest. */
@media (min-width:981px) and (max-width:1279px){
  #scr-game .main{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"board players" "board chat"}
  #scr-game .boardcol{grid-area:board}
  #scr-game .players{grid-area:players;max-height:210px}
  #scr-game .chat{grid-area:chat;min-height:0}
}

/* ======================================================================
   Device pass (2026-10-31): touch targets, iOS zoom, phone landscape.
   ====================================================================== */
#chatin,#set-words,textarea{font-size:16px}
@media (pointer:coarse){
  .btn-copy,.btn-leave,#btn-leave-lobby,.roomchip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .ls-arrow{width:44px;height:44px}
  .avatar-box .arrow{min-width:44px;min-height:44px}
  .customcol{width:44px;height:44px}
  #t-size{height:36px}
}
/* Portrait phones: the guess box sits at the top of the chat, right under the board. */
@media (max-width:600px){
  #scr-game .chat::before{display:none}
  #chatin{order:-1;margin:8px 8px 4px}
  #chatlog{max-height:220px}
}
/* Phones turned sideways: everything on one screen, board as large as the height allows. */
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  #scr-game .logo.small{display:none}
  #scr-game .game-wrap{margin:0;width:100%}
  #scr-game .topbar{border-radius:12px;padding:3px 6px 3px 10px;min-height:44px;gap:8px}
  #scr-game .timer{width:36px;height:36px;font-size:15px;border-radius:10px}
  #scr-game .roomchip,#scr-game .btn-leave{min-height:38px;font-size:11.5px;padding:0 10px}
  #scr-game .wordbar .wb-word{font-size:18px;margin-top:1px}
  #scr-game .main{grid-template-columns:64px minmax(0,1fr) 210px;gap:6px}
  #scr-game .players{padding:4px;border-radius:12px}
  #scr-game .p-row{padding:4px;justify-content:center;min-height:48px}
  #scr-game .p-row .info,#scr-game .p-row .rank{display:none}
  #scr-game .p-row .pencil-ic{top:34px;left:50%;transform:translateX(-50%);font-size:8px;padding:2px 4px}
  #scr-game .boardcol{display:flex;flex-direction:column;min-height:0}
  #scr-game .drawarea{flex:1 1 auto;min-height:0;flex-direction:row;gap:6px}
  #scr-game .rail{flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;padding:4px;gap:2px;border-radius:12px;max-height:100%;min-width:0}
  #scr-game .tool{width:40px;height:40px;flex:0 0 auto}
  #scr-game .tool .ti{width:20px;height:20px}
  #scr-game .railsep{width:26px;height:1px;margin:2px 0}
  #scr-game .canvcol{min-height:0;display:flex;flex-direction:column}
  #scr-game .canv-wrap{border-radius:12px}
  #scr-game .toolbar{flex-wrap:nowrap;overflow-x:auto;padding:4px 8px;gap:10px;border-radius:12px;margin-top:6px;min-width:0}
  #scr-game .swatches{grid-template-columns:repeat(22,28px);gap:4px}
  #scr-game .sw{width:28px;height:28px}
  #scr-game .sizebox{flex:0 0 150px;min-width:150px}
  #scr-game .chat{border-radius:12px}
  #scr-game .chat::before{display:none}
  #chatin{margin:6px;min-height:42px;width:calc(100% - 12px)}
}
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){
  #scr-game .rail{display:grid;grid-template-columns:repeat(2,38px);grid-auto-rows:38px;gap:3px;align-content:start;overflow:visible}
  #scr-game .tool{width:38px;height:38px}
  #scr-game .railsep{grid-column:1/-1;width:auto;height:1px;margin:2px 4px}
}
@media (max-width:380px){
  #scr-game .roundlbl{display:none}
  #scr-game .topbar{gap:6px}
}
@media (min-width:981px){
  #scr-game .game-wrap{margin-bottom:10px}
  #scr-game .canvcol{max-width:calc((var(--vvh,100dvh) - 262px) * 4 / 3)}
}
@media (max-width:980px) and (min-height:501px){
  #chatin{order:-1}
  #scr-game .chat::before{display:none}
}
@media (min-width:981px){
  #scr-game .toolbar{gap:14px}
  #scr-game .sizebox{min-width:130px}
}
@media (min-width:981px) and (max-width:1365px){
  #scr-game .swatches{grid-template-columns:repeat(11,22px);gap:4px}
  #scr-game .sw{width:22px;height:22px}
}
@media (min-width:981px) and (max-height:860px){
  #scr-game .logo.small{margin:8px 0 0}
  #scr-game .logo.small img{width:170px}
}
@media (max-width:600px){
  #scr-game .toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px}
  #scr-game .swatches{grid-column:1/-1}
  #scr-game .sizebox{min-width:0}
}
@media (min-width:1700px){#scr-game .game-wrap{width:min(2200px,96vw)}}
#set-rounds,#set-time,#set-bots{font-size:16px}
/* Sound toggle */
.btn-sound{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:12px;background:#F8F7FC;color:var(--ink);flex:0 0 auto;padding:0}
.btn-sound .ti{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-sound .ti-off,.btn-sound.off .ti-on{display:none}
.btn-sound.off .ti-off{display:block}
.btn-sound.off{color:#B5352C;background:#FDE9E7}
@media (max-width:980px) and (max-height:500px) and (orientation:landscape){#scr-game .btn-sound{width:38px;height:38px}}
@media (max-width:380px){.btn-sound{width:40px;height:40px}}
/* Character name under the avatar picker */
.avatar-box{position:relative;padding-bottom:30px}
.av-name{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:700 15px/1 var(--display);color:var(--ink);letter-spacing:-.01em}