:root {
  --ink: #0b0c0c;
  --muted: #6b6e72;
  --grid-border: #000;
  --black: #000;
  --cell: #ffffff;
  --cell-highlight: #ffd24d;
  --cell-active: #ffeb99;
  --cell-solved: #dff3e6;
  --cell-solved-text: #137a3a;
  --pink: #b8005a;
  --cellSize: 36px;
}


* {box-sizing:border-box}
* {touch-action: manipulation;}
.wrapper {max-width:886px;margin:0 auto 20px auto;}

.topbar {margin:0 0 20px;}
.topbar .topbar-inner {display:flex;align-items:center;padding:20px 0;}
.topbar .topbar-inner .meta {display:flex;flex-direction: column;}
.topbar .topbar-inner .meta .name {font-weight:1000;letter-spacing:.2px;font-size:22px;line-height:34px;}
.topbar .topbar-inner .meta .data {color:var(--muted);font-size:16px;line-height:20px;font-weight:400;margin-top:10px;}
.topbar .topbar-inner .meta .data b {margin:0 20px 0 0;}

/* TIMER / PROGRESS / PAUSE */
.timer {display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:20px;row-gap:10px;align-items:center;margin-left: auto;}
.timer .timer-main {text-align:right;}
.timer .timer-main {grid-column:2;grid-row:1 / span 2;align-self: center;text-align:right;}
.timer .timer-value {font-weight:600;font-size:28px;line-height:34px;}
.timer .timer-sub {font-size:16px;line-height:20px;color:#333;font-weight:400;margin-top:10px;}
.timer .progress {grid-column:1;grid-row:2;}
.timer .progress {font-size:16px;line-height:20px;color:#333;font-weight:400;white-space:nowrap;}
.timer .pause-btn {grid-column:1;grid-row:1;justify-self:start;}
.timer .pause-btn {display:flex;gap:10px;border-radius:10px;padding:10px 15px;font-weight:600;cursor:pointer;background:#333;color:#fff;}
.timer .pause-btn span.label {font-size:14px;line-height:14px;font-weight:600;color:#fff;white-space:nowrap;}
.timer .pause-btn span.pause {width:12px;height:12px;}
.timer .pause-btn span.pause {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23fff' d='M6.48,14.54V1.46c0-.81-.66-1.46-1.46-1.46s-1.46.66-1.46,1.46v13.08c0,.81.66,1.46,1.46,1.46s1.46-.66,1.46-1.46Z'/%3E%3Cpath fill='%23fff' d='M10.98,0c-.81,0-1.46.66-1.46,1.46v13.08c0,.81.66,1.46,1.46,1.46s1.46-.66,1.46-1.46V1.46c0-.81-.66-1.46-1.46-1.46Z'/%3E%3C/g%3E%3C/svg%3E");}
.timer .pause-btn span.resume {width:12px;height:12px;}
.timer .pause-btn span.resume {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23fff' d='M1.74,15.75c.57.33,1.25.33,1.82,0l10.7-6.18c.57-.33.91-.92.91-1.57s-.34-1.25-.91-1.57L3.56.25c-.28-.16-.6-.25-.91-.25s-.62.08-.91.25c-.57.33-.91.92-.91,1.57v12.36c0,.66.34,1.25.91,1.57h0Z'/%3E%3C/g%3E%3C/svg%3E");}


/* LAYOUT */
.layout {display:block;}
.board-wrap {width:100%;margin:0 auto;}

/* BANNER */
.banner {margin:0 20px 20px 20px;background:#323232;color:#fff;border-radius:10px;padding:10px 20px;font-weight:500;}
.banner.hidden {display:none;}
.banner a {color:#fff;text-decoration:underline;}

/* CROSSWORD GRID */
.board {width:max-content;max-width:100%;display:grid;gap:1px;padding:1px;background:var(--grid-border);margin:0 auto;}
.cell {width:var(--cellSize);height:var(--cellSize);background:var(--cell);position:relative}
.cell.black {background:var(--black)}
.cell .num {position:absolute;top:0;left:2px;font-size:10px;font-weight:900;color:#111;pointer-events:none}
.cell.black .num {display:none}
.cell input {width:100%;height:100%;border:0;outline:none;background:transparent;text-align:center;font-weight:900;text-transform:uppercase;}
.cell input {font-size: calc(var(--cellSize) * 0.55);}
.cell.black input {display:none}
.cell.highlight {background:var(--cell-highlight)}
.cell.active {background:var(--cell-active);box-shadow:inset 0 0 0 2px var(--pink)}
.cell.solved {background:var(--cell-solved);}
.cell.solved input{color:var(--cell-solved-text);cursor:default;}

/* NOTICE */
.notice {position:fixed;top:15px;left:50%;transform:translateX(-50%);z-index:9999;background:#000;padding:10px 15px;border-radius:10px;}
.notice {color:#fff;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.22);}
.notice.hidden {display:none;}

/* ON-SCREEN KEYBOARD */
.kbd-wrap {display:none;}

/* ACTIVE CLUE BAR (REWORK) */
.current-clue {display:none;}

/* CLUES PANEL */
.clues-panel {margin:20px 0 0 0;background:#fff;border-radius:20px;padding:20px;box-shadow:0 8px 24px rgba(0,0,0,.08);height:400px;overflow:hidden;}
.clues-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.clues-grid h2 {background:#fff;z-index:1;}
.clues-grid h2 {height:15px;line-height:15px;font-size:16px;font-weight:1000;}
.clue-col {height:325px;padding:0;overflow-y:auto;position:relative;}
.clue-list {margin:0;padding-left:0;}
.clue-item {margin:10px 0;padding:0 10px;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.clue-item {transition:background-color .1s linear;}
.clue-item .n {font-weight:1000;color:#000;min-width:22px}
.clue-item .t {flex:1;line-height:1.25}
.clue-item.solved {opacity:.5}
.clue-item.active {background:#fff3b0;border-bottom:2px solid #edc500;border-radius:10px;padding:10px 10px;}
.clue-refresh {transition:all .1s linear;}
.clue-refresh {height:20px;border:0;background:transparent;color:#666;font-weight:900;font-size:20px;line-height:20px;cursor:pointer;}

/* CONTROL BUTTONS */
.controls {margin:20px 0;background:none;}
.control-row {display:flex;flex-wrap:wrap;gap:10px;}
.pill {border-radius:10px;padding:8px 10px;cursor:pointer;background:#323232;}
.pill {font-size:14px;color:#fff;font-weight:600;}
.pill {transition:all .1s linear;}
.pill:nth-child(6) {margin-left:auto;}
.pill.dark {background: linear-gradient(135deg, #f59c00 0%, #f6a300 40%, #f7ad00 70%, #f8b400 100%);}
.pill.dark {transition:all .1s linear;}
.pill.dark {color:#000;}
.pill:disabled {opacity:.5;cursor:not-allowed;}


/* Mobile */
.mobile {display:block;}
.mobile .controls {display:block;}


/* PAUSE / FREEZE STATES */
.game-paused .board,.game-paused .controls,.game-paused .kbd-wrap,.game-paused .clues-panel{opacity:.5;pointer-events:none;}
.game-paused .pause-btn {opacity:1;pointer-events:auto;position:relative;z-index:5;}
.game-paused .current-clue {opacity:.6;pointer-events:none;}
.game-paused .timer-main {opacity:.6;}
.game-paused .progress {opacity:.6;}
.game-paused .pause-btn {opacity:1;pointer-events:auto;z-index:5;}
.game-frozen .board,.game-frozen .controls,.game-frozen .kbd-wrap,.game-frozen .clues-panel,.game-frozen .topbar {opacity:.8;pointer-events:none;}
.game-frozen .topbar .timer button {display:none;}
.game-frozen .current-clue {opacity:.6;pointer-events:none;}


/* Create crossword page */
.game_create {margin:0 -20px;}
.game_create td {padding:20px;border-bottom:1px solid #d3d3d3;}
.game_create tr td:nth-child(1) {min-width:20%;}
.game_create td.field input {width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid #ccc;background:#f3f3f3;box-sizing:border-box;}
.game_create td.field input {font-size:18px;}
.game_create td.field input:focus {outline:none;box-shadow:0 0 0 0.2rem rgba(0,123,255,.25);transition:box-shadow .3s;}
.game_create td.field .picker {display:flex;flex-wrap:wrap;gap:10px}
.game_create td.field .picker .pick {padding:12px 20px;border-radius:10px;background:#f3f3f3;border:1px solid #ccc;box-sizing:border-box;}
.game_create td.field .picker .pick {font-weight:500;line-height:20px;}
.game_create td.field .picker .pick {transition:all .1s linear;}
.game_create td.field .picker.pick:hover {background:#fbc300;cursor:pointer;}
.game_create td.field .picker .pick.active.active {background:#ffd306;border:1px solid #ffd306;}
.game_create td.union .btn {transition:all .1s linear;}
.game_create td.union .btn {font-size:18px;font-weight:500;text-transform:uppercase;}
.game_create td.union .btn {padding:15px 20px;line-height:20px;border-radius:10px;color:#fff;background:#323232;border:0;}
.game_create td.field .muted {color:var(--muted);margin-top:12px;}
.game_create td.union {text-align:center;}


@media (max-width: 1024px) {
	
.wrapper {max-width:100vw;}
input:focus{outline:none;}

/* Layout */
.board-wrap {width:100%;}

/* Topbar */
.topbar {margin:0 0 20px 0;}
.topbar .topbar-inner {padding:10px 0;}
.topbar .topbar-inner .meta {display:none;}
.topbar .topbar-inner .timer {width:100%;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:20px;row-gap:5px;align-items:center;}
.topbar .topbar-inner .timer .pause-btn {grid-column:1;grid-row:1;justify-self:start;}
.topbar .topbar-inner .timer .pause-btn {gap:10px;padding:5px 0px;font-weight:600;font-size:16px;background:none;color:#000;}
.topbar .topbar-inner .timer .pause-btn span.label {font-weight:600;font-size:16px;line-height:14px;color:#000;}
.topbar .topbar-inner .timer .pause-btn span.pause {width:14px;height:14px;}
.topbar .topbar-inner .timer .pause-btn span.pause {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath d='M2.92,14.54V1.46c0-.81-.66-1.46-1.46-1.46S0,.66,0,1.46v13.08c0,.81.66,1.46,1.46,1.46s1.46-.66,1.46-1.46Z'/%3E%3Cpath d='M7.42,0c-.81,0-1.46.66-1.46,1.46v13.08c0,.81.66,1.46,1.46,1.46s1.46-.66,1.46-1.46V1.46c0-.81-.66-1.46-1.46-1.46Z'/%3E%3C/g%3E%3C/svg%3E");}
.topbar .topbar-inner .timer .pause-btn span.resume {width:14px;height:14px;}
.topbar .topbar-inner .timer .pause-btn span.resume {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg%3E%3Cpath fill='%23000' d='M1.74,15.75c.57.33,1.25.33,1.82,0l10.7-6.18c.57-.33.91-.92.91-1.57s-.34-1.25-.91-1.57L3.56.25c-.28-.16-.6-.25-.91-.25s-.62.08-.91.25c-.57.33-.91.92-.91,1.57v12.36c0,.66.34,1.25.91,1.57h0Z'/%3E%3C/g%3E%3C/svg%3E");}
.topbar .topbar-inner .timer .progress {grid-column:1;grid-row:2;}
.topbar .topbar-inner .timer .progress {font-weight:400;line-height:16px;}
.topbar .topbar-inner .timer .timer-main {grid-column:2;grid-row:1 / span 2;align-self: center;text-align:right;}
.topbar .topbar-inner .timer .timer-main .timer-value {font-size:20px;line-height:24px;}
.topbar .topbar-inner .timer .timer-main .timer-sub {font-weight:400;line-height:16px;}

/* CLUES PANEL */
.clues-panel {display:none;}

/* Mobile */
.mobile {width:100vw;position:fixed;background:#fff;bottom:0;left:0;z-index:1;}

/* CROSSWORD GRID */
.board {width: max-content;max-width:100%;box-sizing:border-box;margin:0 auto;}
.cell {width:var(--cellSize);height:var(--cellSize);background:var(--cell);position:relative;}
.cell.black {background:var(--black);}
.cell .num {position:absolute;top:0;left:2px;font-size:10px;font-weight:900;color:#111;pointer-events:none;}
.cell.black .num {display:none;}
.cell input {width:100%;height:100%;border:0;outline:none;background:transparent;text-align:center;font-weight:900;text-transform:uppercase;}
.cell input {font-size: calc(var(--cellSize) * 0.55);}
.cell.black input {display:none;}
.cell.highlight {background:var(--cell-highlight);}
.cell.active {background:var(--cell-active);box-shadow:inset 0 0 0 2px var(--pink);}
.cell.solved {background:#e9f7ea;}
.cell.solved input{color:#0a6b16;cursor:default;}

/* ON-SCREEN KEYBOARD */
.kbd-wrap {display:block;width:100vw;background:#2b2b2b;}
.kbd-wrap {margin:0;padding:20px;}
.kbd-toggle {width:100%;font-weight:600;cursor:pointer;background:#2b2b2b;color:#fff;text-align:right;}
.kbd-panel.hidden {display:none}
.kbd-panel {display: grid;grid-template-rows: repeat(3, auto);gap:3px;}
.kbd-row:first-of-type {margin:20px 0 0 0;}
.kbd-row {display: grid;grid-auto-flow: column;grid-auto-columns:1fr;gap:3px;}
.kbd-key {height: 38px;background:#656565;border-radius:6px;color:#fff;display:flex;align-items: center;justify-content: center;font-weight:500;}
.kbd-key.wide {grid-column:span 2;background:#484848;}


/* ACTIVE CLUE BAR (REWORK) */
.current-clue {margin:0;background:#067eff;padding:10px 20px;display:flex;align-items:center;gap:20px;}
.clue-nav {cursor:pointer;display:flex;align-items:center;justify-content:center;}
.clue-nav {background:transparent;font-weight:600;font-size:18px;color:#fff;}
.clue-nav span.left {display:flex;width:10px;height:18px;}
.clue-nav span.left {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cg%3E%3Cpath fill='%23fff' d='M9.17,18c-.21,0-.43-.08-.59-.24L.24,9.58c-.33-.32-.33-.84,0-1.16L8.58.24c.33-.32.85-.32,1.18,0s.33.84,0,1.16l-7.74,7.6,7.74,7.6c.33.32.33.84,0,1.16-.16.16-.38.24-.59.24h0Z'/%3E%3C/g%3E%3C/svg%3E");}
.clue-nav span.right {display:flex;width:10px;height:18px;}
.clue-nav span.right {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cg%3E%3Cpath fill='%23fff' d='M.83,18c-.21,0-.43-.08-.59-.24-.33-.32-.33-.84,0-1.16l7.74-7.6L.24,1.4c-.33-.32-.33-.84,0-1.16s.85-.32,1.18,0l8.33,8.18c.33.32.33.84,0,1.16L1.42,17.76c-.16.16-.38.24-.59.24h0Z'/%3E%3C/g%3E%3C/svg%3E");}
.clue-text-wrap {flex:1;display:flex;align-items:center;justify-content:center;gap:20px;min-height:36px}
#activeClueText {font-weight:500;color:#fff;font-size:18px;line-height:22px;text-align:center;}
.current-clue .clue-refresh {background:transparent;color:#fff;font-weight:600;font-size:22px;line-height:22px;cursor:pointer;}
.current-clue .clue-refresh:hover {color:#fff;}
.current-clue.solved {opacity:.5}


/* CONTROL BUTTONS */
.controls {margin:0;padding:20px 0 0 0;background:#2b2b2b;}
.control-row {display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scrollbar-width: none;-ms-overflow-style: none;}
.control-row::-webkit-scrollbar {display:none;}
.pill {white-space:nowrap;background:#656565;}
.pill.dark {color:#000;}
.pill:first-child {margin:0 0 0 20px;}
.pill:last-child {margin:0 20px 0 0;}


/* Create crossword page */
.game_create td.label {width:100%;}
.game_create td.field {width:100%;}
.game_create td.field input {width:100%;}
.game_create tr td:nth-child(1) {width:100px;}



}





@media (min-width: 1024px) {

.game_create td.field .pick:hover {background:#fbc300;cursor:pointer;}
.game_create td.union .btn:hover {background:#000;cursor:pointer;}

.pause-btn:hover {background:#000;}

.clue-refresh:hover {color:#000;}
.pill:hover {background:#000;}
.pill.dark:hover {background: linear-gradient(135deg, #f79f00 0%, #f8a800 40%, #f9b300 70%, #fabd00 100%);}


}