/* Skin "v2" — the Dice Roller v2 design: early-web gray, Times New Roman, outset buttons, green felt tray.
   Colours and sizes are the design's; light/dark follow the system until the toggle sets data-theme.
   Phones get the "Dice Roller Mobile" design: the @media block at the end. */
:root{color-scheme:light dark;--bg:#c0c0c0;--fg:#000;--mute:#3a3a3a;--line:#808080;--box:#fff;--link:#0000ee;--ad:#a8a8a8;--err:#b00000;--head:#000;--visit:#551a8b;--btnfg:#000;--btn:#c0c0c0;--felt:#2f4a39}
@media (prefers-color-scheme: dark){:root{--bg:#000;--fg:#ffcc99;--head:#ffff00;--mute:#99ccff;--line:#555;--box:#000;--link:#ffff00;--visit:#ff66ff;--ad:#333;--err:#ff4444;--btn:#808080;--btnfg:#000}}
:root[data-theme=light]{color-scheme:light;--bg:#c0c0c0;--fg:#000;--mute:#3a3a3a;--line:#808080;--box:#fff;--link:#0000ee;--ad:#a8a8a8;--err:#b00000;--head:#000;--visit:#551a8b;--btnfg:#000;--btn:#c0c0c0}
:root[data-theme=dark]{color-scheme:dark;--bg:#000;--fg:#ffcc99;--head:#ffff00;--mute:#99ccff;--line:#555;--box:#000;--link:#ffff00;--visit:#ff66ff;--ad:#333;--err:#ff4444;--btn:#808080;--btnfg:#000}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.3 "Times New Roman",Times,serif}
a{color:var(--link)}a:visited{color:var(--visit)}a:hover{color:#ff3333}
button,input{font:inherit}
button{border-radius:0;border:2px outset var(--btn);background:var(--btn);color:var(--btnfg);padding:3px 8px;cursor:default}
button:active{border-style:inset}
input{border-radius:0}
[hidden]{display:none!important}
.mono{font-family:"Courier New",Courier,monospace}
.mute{color:var(--mute)}
.small{font-size:12px}

.page{max-width:1400px;margin:0 auto;padding:10px 16px 24px;box-sizing:border-box}
.topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:2px groove var(--btn);padding-bottom:6px;margin-bottom:12px}
h1{font-size:28px;margin:0;font-weight:bold;color:var(--head)}
h2{font-size:17px;margin:0 0 6px;color:var(--head)}
.small-btn{font-size:11px}
.top-tools{display:flex;align-items:center;gap:10px}
select{font:inherit;border-radius:0;border:2px inset var(--btn);background:var(--box);color:var(--fg)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.side{display:flex;flex-direction:column;gap:18px}

.tray{position:relative;height:580px;border:2px inset var(--btn);background:var(--felt);overflow:hidden}
.tray-canvas{position:absolute;inset:0}
.caption{position:absolute;left:10px;top:8px;color:#ecebe2;font-size:12px;pointer-events:none}
.engine-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ecebe2;pointer-events:none}
.toasts{position:absolute;left:8px;right:8px;bottom:8px;display:none;flex-direction:column;gap:3px;align-items:flex-start;pointer-events:none}
.toast{background:#000;color:#fff;border:1px solid #808080;padding:2px 6px;font-size:14px;opacity:.9;transition:opacity 1s linear;max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.fade{opacity:0}

.result{display:flex;align-items:baseline;gap:12px;min-height:46px;padding:6px 2px 4px;border-bottom:2px groove var(--btn)}
.result .total{font:bold 34px "Times New Roman",Times,serif}
.result .parts{font-family:"Courier New",Courier,monospace;color:var(--mute)}
.parts span{white-space:pre}
.parts .drop{text-decoration:line-through;opacity:.5}

.controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.controls .die{min-width:50px;padding:6px 0}
#notation{font:15px "Courier New",Courier,monospace;padding:5px 6px;width:210px;border:2px inset var(--btn);background:var(--box);color:var(--fg);margin-left:8px}
.controls .roll{font-weight:bold;padding:6px 20px}
.controls .clear{padding:6px 10px}
.secret{display:flex;align-items:center;gap:4px;margin-left:6px}
.err{color:var(--err);margin-top:6px}
.err.small{margin-top:4px}

.room-row{display:flex;gap:6px}
#room-link{flex:1;min-width:0;font:13px "Courier New",Courier,monospace;padding:4px;border:2px inset var(--btn);background:var(--box);color:var(--fg)}
#copy{min-width:64px}

.player{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid var(--line)}
.swatch{width:10px;height:10px;border:1px solid var(--fg);flex:none}
button.swatch{padding:0;border-radius:0;cursor:pointer}
.color-pick{margin-top:8px;padding:8px;border:2px inset var(--btn);background:var(--box);display:flex;flex-direction:column;gap:6px}
.color-tiles{display:flex;flex-wrap:wrap;gap:6px}
.color-tile{width:22px;height:22px;padding:0;border:1px solid var(--fg);border-radius:0;cursor:pointer}
.color-tile[aria-pressed=true]{outline:2px solid var(--fg);outline-offset:2px}
.gm-tag{font-size:11px;font-weight:bold;color:var(--mute)}
.spacer{flex:1}
.link-btn{background:none;border:0;padding:0;font-size:11px;color:var(--link);text-decoration:underline;cursor:pointer}

.rename{margin-top:8px;padding:8px;border:2px inset var(--btn);background:var(--box);display:flex;flex-direction:column;gap:6px}
.rename label{display:flex;flex-direction:column;gap:2px}
.rename input{padding:3px 4px;border:2px inset var(--btn);background:var(--bg);color:var(--fg)}
.rename .hint{font-size:11px;color:var(--mute)}
.rename .row{display:flex;gap:6px}

.history{height:300px;overflow-y:auto;border:2px inset var(--btn);background:var(--box);padding:0 6px}
.history .pad{padding:6px 0}
.h-item{padding:4px 0;border-bottom:1px solid var(--line)}
.h-line{display:flex;gap:8px;align-items:baseline}
.h-time{font:12px "Courier New",Courier,monospace;color:var(--mute);flex:none}
.h-event{color:var(--mute)}
.h-event .h-time{color:inherit}
.h-tag{font-size:11px;color:var(--mute)}
.h-sub{display:flex;gap:8px;align-items:baseline;padding-left:72px}
.h-sub b{font-size:15px}
.h-sub .parts{font:12px "Courier New",Courier,monospace;color:var(--mute)}

.ad-block{border-top:2px groove var(--btn);padding-top:10px}
.ad-block p{margin:0 0 8px;font-size:11px;color:var(--mute)}
.ad{width:300px;height:250px;background:var(--ad)}
.tip{margin-top:10px}

/* Phones: the "Dice Roller Mobile" design. The room link moves into the top bar (skin.js), History comes
   before Players, toasts over the tray replace the result line, and everything tappable is 44px tall. */
.narrow{display:none}
@media (max-width:767px){
  .wide,.result{display:none}
  .narrow{display:inline}
  .page{max-width:430px;padding:8px 10px 24px}
  .topbar{justify-content:flex-start;gap:6px}
  h1{font-size:20px;flex:none}
  .top-room,.room-box,.room-row{flex:1;min-width:0;display:flex;gap:4px}
  #theme{font-size:14px;height:44px;padding:0 8px;flex:none}
  #no-room{flex:1;min-width:0;height:44px;box-sizing:border-box;border:2px inset var(--btn);display:flex;align-items:center;padding:0 6px;font-size:13px}
  #room-link{height:44px;box-sizing:border-box}
  #copy{min-width:0;flex:none;height:44px;padding:0 8px}
  .cols{display:flex;flex-direction:column;gap:18px}
  .tray{height:340px}
  .toasts{display:flex}
  .controls{margin-top:8px}
  .controls .die{flex:1 1 0;min-width:0;height:44px;padding:0}
  #notation{flex:1 1 100%;box-sizing:border-box;height:44px;font-size:16px;padding:5px 8px;margin-left:0}
  .controls .roll{flex:1;height:44px;font-size:18px;padding:3px 8px}
  .controls .clear{height:44px;padding:0 16px}
  .secret{flex:1 1 100%;min-height:44px;gap:8px;margin-left:0}
  .secret input{width:20px;height:20px;margin:0}
  .history-section{order:-1}
  .history{height:auto;max-height:360px}
  .h-sub{padding-left:0}
  .link-btn{font-size:15px;padding:12px 0 12px 10px}
  .rename input{height:44px;box-sizing:border-box;font-size:16px;padding:4px 6px}
  .rename .row button{flex:1;height:44px}
  .ad{width:320px;height:50px;max-width:100%;margin:0 auto}
  .tip button{height:44px}
}