@import url('/storm/style.css');

/* Willkommen und Lobby verwenden SketchStorms Maße, Abstände und Komponenten. */
body::before{background:linear-gradient(var(--background-tint),var(--background-tint)),url('/drift/background.png') center/cover no-repeat}
:root[data-background="grob"] body::before{background:linear-gradient(var(--background-tint),var(--background-tint)),url('/drift/background-grob.png') center/cover no-repeat}
:root[data-background="plain"] body::before{display:none}
.in-game .site-header{display:none}
.drift-status{grid-template-columns:auto minmax(0,1fr) auto;min-height:102px}
.drift-status .status-logo{height:70px;max-width:147px;width:147px;object-fit:contain}
.drift-status .status-center{text-align:center;min-width:0}
.drift-status .status-center strong{font-size:clamp(20px,2.7vw,34px);display:block;line-height:1.15}
.drift-status .status-center small{color:var(--muted);font-size:13px}
.drift-status .time-block{text-align:right;min-width:130px;color:var(--muted);font-size:13px}
.drift-status .time-block .time{display:block}
.drift-main{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:15px;align-items:stretch}
.drift-main>.card{padding:17px;min-width:0}
.drift-main h2{margin:0 0 12px}
.drift-task{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:13px 17px;margin-bottom:13px;text-align:center;overflow-wrap:anywhere}
.drift-task strong{color:var(--aqua);font-size:clamp(18px,2vw,26px)}
.drift-task .small{display:block;color:var(--muted);margin-bottom:4px}
.drift-prompt{max-width:900px;margin:clamp(30px,7vh,100px) auto;padding:clamp(23px,4vw,45px)}
.drift-prompt h2{font-size:clamp(30px,3vw,44px)}
.drift-prompt textarea{display:block;width:100%;min-height:170px;resize:vertical;border:1px solid #71859a;border-radius:15px;background:#101a29;color:#fff;padding:19px;font:inherit;font-size:clamp(19px,2vw,25px);line-height:1.5;outline:none}
.drift-prompt textarea:focus{border-color:var(--aqua);box-shadow:0 0 0 3px #8de6ff30}
.drift-prompt .button-row{margin-top:20px;justify-content:flex-end}
.drift-board{display:grid;grid-template-columns:54px minmax(0,1fr) 125px;gap:13px;align-items:start}
.drift-canvas-shell{border:3px solid #d2d7df;border-radius:13px;background:#fff;overflow:hidden;box-shadow:0 14px 32px #0003;touch-action:none;position:relative}
.drift-canvas-shell canvas{width:100%;display:block;aspect-ratio:1200/720;touch-action:none;cursor:crosshair}
.drift-palette,.drift-tools{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 5px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.drift-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;align-content:start;gap:8px;padding:9px}
.drift-palette button{width:35px;height:35px;border:2px solid #ffffffa8;border-radius:10px;background:var(--paint);padding:0;flex:none}
.drift-palette button.selected{outline:2px solid var(--aqua);outline-offset:2px}
.drift-palette button.white{border-color:#8292a7}
.drift-palette .color-wheel{position:relative;overflow:hidden;background:conic-gradient(red,#f0f,blue,cyan,lime,yellow,red);border-radius:50%}
.drift-palette .color-wheel input{position:absolute;inset:-9px;opacity:0;width:calc(100% + 18px);height:calc(100% + 18px);cursor:pointer}
.drift-tools button{width:100%;min-height:49px;display:grid;place-items:center;padding:4px;border:1px solid var(--line);border-radius:10px;background:#ffffff0a;color:#fff;font-size:24px;font-weight:900;line-height:1;cursor:pointer}
.drift-tools button:hover:not(:disabled){border-color:var(--aqua);background:#ffffff24}
.drift-tools button.selected{background:var(--aqua);border-color:var(--aqua);color:#10212a}
.drift-tools button:disabled{opacity:.36}
.drift-tools button .tool-symbol{font-family:Arial,sans-serif}
.drift-size-row{display:flex;align-items:center;gap:15px;margin:12px 0 0 67px;padding:10px 15px;border-radius:12px;background:var(--panel2)}
.drift-size-row label{font-weight:800;white-space:nowrap}
.drift-size-row input{width:min(45%,300px);accent-color:var(--aqua)}
.drift-size-row .size-dot{height:var(--dot-size,12px);width:var(--dot-size,12px);max-height:42px;max-width:42px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 2px #fff4;flex:none}
.drift-board-actions{display:flex;justify-content:flex-end;margin-top:15px}
.drift-players{height:100%;min-height:240px}
.drift-players .player-list li{gap:9px;align-items:center}
.drift-players .player-list small{margin-left:auto;font-size:11px;white-space:nowrap}
.drift-waiting{display:grid;place-items:center;min-height:260px;text-align:center}
.drift-waiting h2{font-size:clamp(30px,4vw,45px)}
.drift-reveal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,310px);gap:16px}
.drift-reveal-layout.wide{grid-template-columns:1fr}
.drift-reveal-layout>.card{min-width:0}
.drift-reveal-main{min-height:450px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:15px}
.drift-reveal-main h2{font-size:clamp(31px,4vw,52px);margin:0}
.drift-reveal-text{font-size:clamp(22px,3vw,38px);font-weight:750;line-height:1.4;overflow-wrap:anywhere;max-width:28ch}
.drift-reveal-canvas{display:block;width:100%;max-width:900px;aspect-ratio:1200/720;border:3px solid #d2d7df;border-radius:12px;background:#fff}
.drift-reveal-author{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--aqua);font-size:18px;font-weight:850}
.drift-timeline{max-height:calc(100dvh - 220px);overflow:auto}
.drift-timeline ol{list-style:none;padding:0;margin:10px 0;display:grid;gap:9px}
.drift-timeline li{padding:10px;border:1px solid var(--line);background:var(--panel2);border-radius:11px}
.drift-timeline li.current{border-color:var(--aqua)}
.drift-timeline li strong{display:flex;align-items:center;gap:7px}
.drift-timeline li p{margin:7px 0 0;font-size:13px;overflow-wrap:anywhere}
.drift-people{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.drift-people summary{cursor:pointer;color:var(--aqua);font-weight:800}
.drift-people .player-list li{padding:6px}
.drift-reveal-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.drift-final{max-width:1040px;margin:0 auto}
.drift-albums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.drift-albums article{border:1px solid var(--line);border-radius:13px;padding:17px;background:var(--panel2)}
.drift-albums h3{margin:0 0 10px}
.drift-albums ol{margin:0;padding-left:21px}
.drift-albums li{padding:4px 0;line-height:1.45;overflow-wrap:anywhere}
.drift-albums a{color:var(--aqua)}
.drift-final .button-row{margin-top:22px}
@media(max-width:980px){.drift-main{grid-template-columns:1fr}.drift-players{min-height:0}.drift-players .player-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.drift-palette{gap:4px}.drift-palette button{height:28px;width:28px}.drift-tools button{min-height:39px}}
@media(max-width:700px){.drift-status{grid-template-columns:90px 1fr auto;min-height:84px}.drift-status .status-logo{width:88px;height:55px}.drift-status .status-center strong{font-size:17px}.drift-status .time-block{min-width:55px;font-size:11px}.drift-status .time{font-size:22px}.drift-board{grid-template-columns:1fr;gap:8px}.drift-canvas-shell{grid-column:1;grid-row:1}.drift-tools{grid-column:1;grid-row:3;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.drift-tools button{width:44px;min-height:38px;font-size:20px}.drift-palette{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;justify-content:center}.drift-size-row{margin-left:0}.drift-reveal-layout{grid-template-columns:1fr}.drift-timeline{max-height:260px}.drift-albums{grid-template-columns:1fr}}
@media(max-width:420px){.drift-players .player-list{grid-template-columns:1fr}.drift-status .status-center small{display:none}.drift-size-row{gap:7px;font-size:12px}.drift-size-row input{width:50%}}