@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
:root{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:#24365c;background:#f3f7ff;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;overflow-x:hidden}
body{background:radial-gradient(ellipse 60% 25% at 100% 0%,#e6efff 0%,transparent 85%),#f3f7ff}
button,select{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #6486f5;outline-offset:3px}
[hidden]{display:none!important}
svg{display:block}
.wm-app{height:calc(100dvh - var(--games-header-height,70px));min-height:0;display:flex;overflow:hidden}
.games-is-fullscreen .wm-app{height:100dvh}
.wm-main{width:100%;max-width:980px;flex:1;min-height:0;margin:0 auto;padding:clamp(10px,1.8vh,18px) clamp(10px,2vw,22px);display:flex;flex-direction:column}

/* Main screen: selectors, unit choices, then a single start action. */
.wm-menu-screen{width:100%;max-width:900px;margin-inline:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
.wm-menu-panel,.wm-workspace{border:1px solid #e2e9f5;border-radius:22px;background:#fff;box-shadow:0 13px 34px #314d891b,0 2px 6px #314d8908}
.wm-menu-panel{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:clamp(13px,2vw,24px);overflow:hidden}
.wm-menu-panel::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-120px;background:radial-gradient(circle,#e8f0ff99,transparent 72%);pointer-events:none}
.wm-menu-main-selects{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) minmax(0,1fr);gap:12px;position:relative;flex:none}
.wm-select-wrap{min-width:0;display:flex;flex-direction:column;gap:6px;position:relative}
.wm-select-wrap>span{font-size:10px;letter-spacing:.09em;font-weight:900;color:#7c8da9}
.wm-select-wrap select{appearance:none;width:100%;height:45px;min-width:0;border:1px solid #dbe5f5;border-radius:11px;padding:0 34px 0 12px;background:#f8faff;color:#33466e;font-size:15px;font-weight:800;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;transition:border-color .15s,background .15s}
.wm-select-wrap select:hover{border-color:#a7bbe9;background:#f5f8ff}
.wm-select-wrap svg{position:absolute;bottom:14px;right:11px;width:16px;height:16px;pointer-events:none;stroke:#8698bd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.wm-menu-unit-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1px 3px 0;flex:none}
.wm-menu-unit-header h2{font:900 16px Nunito,system-ui,sans-serif;letter-spacing:-.015em;margin:0;color:#2c416a}
.wm-menu-unit-header>span{font-size:11px;font-weight:800;color:#8b98b2}
.wm-menu-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 6px 3px;scrollbar-color:#c7d5ed transparent;position:relative}
.wm-unit-tile{min-width:0;display:flex;align-items:center;gap:12px;min-height:54px;text-align:left;border:1px solid #e0e7f3;border-radius:13px;background:#fcfdff;padding:9px 12px;color:#4b5c79;box-shadow:0 3px 0 #edf1f8;transition:border-color .15s,transform .15s,background .15s,box-shadow .15s}
.wm-unit-tile:hover{transform:translateY(-1px);border-color:#a6bced;background:#f5f8ff}
.wm-unit-tile.is-current{border-color:#7ba3ed;background:#eaf2ff;box-shadow:inset 0 0 0 1px #7ba3ed,0 3px 0 #d2e1fc}
.wm-unit-tile strong{flex:none;white-space:nowrap;font-size:14px;font-weight:900;color:#355cae}
.wm-unit-tile span{font-size:14px;font-weight:700;line-height:1.3;text-align:right;margin-left:auto;overflow-wrap:anywhere}
.wm-menu-bottom{flex:none;display:flex;justify-content:flex-end;align-items:end;gap:16px;padding-top:12px;border-top:1px solid #eaf0f9;position:relative}
.wm-start,.wm-primary{border:0;background:#5276e5;color:#fff;border-radius:12px;font-size:13px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 4px 0 #3555b9;transition:transform .15s,background .15s,opacity .15s}
.wm-start{height:45px;padding:0 19px;white-space:nowrap}
.wm-start svg,.wm-primary svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wm-start:hover:not(:disabled),.wm-primary:hover:not(:disabled){background:#4168d5;transform:translateY(-2px)}
.wm-start:active:not(:disabled),.wm-primary:active:not(:disabled){transform:translateY(2px)}
.wm-start:disabled,.wm-primary:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}

/* Exercise: every section participates in the height budget; rows flex to fit. */
.wm-game-screen{width:100%;max-width:980px;margin-inline:auto;flex:1;min-height:0;display:flex;flex-direction:column}
.wm-workspace{flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(10px,2vh,21px) clamp(10px,2vw,25px) clamp(10px,1.8vh,18px);overflow:hidden}
.wm-game-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}
.wm-round-heading{display:flex;align-items:center;gap:10px;min-width:0}
.wm-round-icon{flex:none;width:41px;height:41px;background:#eaf0ff;border-radius:12px;display:grid;place-items:center}
.wm-round-icon svg{width:23px;height:23px;stroke:#5374d9;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.wm-eyebrow{color:#8e9ab1;letter-spacing:.08em;font-size:10px;font-weight:900}
.wm-round-heading h2{font:900 clamp(15px,2vw,19px) Nunito,system-ui,sans-serif;letter-spacing:-.02em;margin:2px 0 0;color:#2c416a}
.wm-score{display:flex;align-items:center;gap:7px;background:#f5faf7;border:1px solid #e2f1e9;border-radius:100px;padding:8px 12px;color:#7c998c;font-size:12px;white-space:nowrap}
.wm-score strong{font-weight:900;color:#34866e;font-size:14px}
.wm-score-dot{width:7px;height:7px;border-radius:50%;background:#4fc49d}
.wm-progress{height:7px;overflow:hidden;background:#edf1fa;border-radius:40px;flex:1;min-width:35px;margin:0}
.wm-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#66cfac,#4da6bc);border-radius:inherit;transition:width .35s cubic-bezier(.2,.8,.3,1)}
.wm-hint{flex:none;font-size:clamp(10px,1.5vh,12px);color:#8490a7;margin:clamp(8px,1.3vh,13px) 0;min-height:17px;display:flex;align-items:center;gap:8px;line-height:1.3}
.wm-hint-icon{font-size:15px;color:#7290d9}
.wm-hint.is-wrong{color:#c66b63}
.wm-hint.is-wrong .wm-hint-icon{color:#e58a80}
.wm-hint.is-correct{color:#328d70}
.wm-board{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid #e7edf6;background:#f9fbff;border-radius:15px;padding:clamp(7px,1.5vh,13px) clamp(7px,1.5vw,17px);overflow:hidden}
.wm-board-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,7vw,90px)}
.wm-list{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--wm-row-count,6),minmax(0,1fr));gap:clamp(3px,.85vh,9px);min-width:0;min-height:0;position:relative;z-index:1}
.wm-word{position:relative;width:82%;max-width:310px;height:100%;min-width:0;min-height:0;overflow:hidden;padding:4px clamp(6px,1.2vw,15px);border:1.5px solid #e3eaf5;border-radius:10px 17px 17px 10px;display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,.85vw,10px);text-align:left;background:#fff;color:#33466d;font-size:clamp(13px,1.95vh,17px);line-height:1.2;font-weight:800;box-shadow:0 2px 0 #eaf0f8;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;animation:wm-appear .3s backwards}
/* On desktop, labels hug the outer edges for maximum line spacing. */
.wm-list:first-child .wm-word{justify-self:start;margin-left:clamp(10px,1.8vw,22px);border-radius:10px 18px 18px 10px}
.wm-list:last-child .wm-word{justify-self:end;margin-right:clamp(10px,1.8vw,22px);border-radius:18px 10px 10px 18px}
.wm-list:first-child .wm-word::before,.wm-list:last-child .wm-word::before{content:"";position:absolute;top:50%;width:3px;height:12px;transform:translateY(-50%);background:#dce5f3;border-radius:4px;opacity:.8}
.wm-list:first-child .wm-word::before{left:3px}
.wm-list:last-child .wm-word::before{right:3px}
.wm-word:hover:not(:disabled){border-color:#b7caf4;box-shadow:0 3px 0 #e5edfa}
.wm-word:active:not(:disabled){filter:brightness(.97)}
.wm-word-text{padding-inline:clamp(4px,.7vw,9px);flex:1;min-width:0;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
.wm-port{width:10px;height:10px;border:2px solid #cbd7ec;background:#fff;border-radius:50%;flex:none;position:relative;z-index:2}
.wm-word.is-selected,.wm-word.is-error{background:var(--wm-soft);color:var(--wm-dark);border-color:var(--wm-accent);box-shadow:0 2px 0 var(--wm-rim)}
.wm-word.is-selected .wm-port,.wm-word.is-error .wm-port{border-color:var(--wm-accent);background:var(--wm-accent)}
.wm-word.is-matched{background:var(--wm-soft);border-color:var(--wm-accent);color:var(--wm-dark);box-shadow:0 2px 0 var(--wm-rim);cursor:default}
.wm-word.is-matched .wm-port{background:var(--wm-accent);border-color:var(--wm-accent)}
.wm-word.is-error{animation:wm-shake .3s ease}
.wm-word:disabled{opacity:1}
.wm-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}
.wm-connectors path{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:6 6;animation:wm-draw .28s ease both}
.wm-bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex:none;padding-top:clamp(8px,1.4vh,15px)}
.wm-primary{height:42px;min-width:155px;padding:0 12px}
.wm-empty{grid-column:1/-1;padding:20px;text-align:center;color:#7787a4;font-size:13px}
.wm-word.is-new{animation:wm-appear .32s both}
.wm-designer{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(9px,env(safe-area-inset-bottom));z-index:50;padding:4px 10px;border:1px solid #d9e2f0;border-radius:999px;background:#ffffffdd;backdrop-filter:blur(7px);box-shadow:0 2px 9px #23375f12;color:#71809b;text-decoration:none;font:700 10px/1.1 'DM Sans',sans-serif;letter-spacing:.055em;opacity:.8}
.wm-designer:hover{opacity:1;color:#4e73e4}
.games-header .games-header-name{font:900 clamp(15px,2.15vw,27px)/1.12 Nunito,system-ui,sans-serif;letter-spacing:-.045em;color:#23375f;transform:none;overflow:visible;text-overflow:clip}
.games-header .wm-header-accent{color:#4e73e4;position:relative}
.games-header .wm-header-accent::after{content:"";position:absolute;left:16%;right:2%;bottom:-6px;height:4px;border-radius:80% 30% 60% 35%;background:#f3c768;transform:rotate(-3deg)}
@keyframes wm-appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes wm-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes wm-draw{from{opacity:0;stroke-dashoffset:35}to{opacity:1;stroke-dashoffset:0}}

/* Shared confirmation dialog for header navigation and restart. */
.wm-confirm-backdrop[hidden]{display:none!important}
.wm-confirm-backdrop{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:#162746a8;backdrop-filter:blur(5px);animation:wm-result-fade .2s ease both}
.wm-confirm-modal{width:min(100%,390px);padding:28px 25px 24px;border:1px solid #e1eafa;border-radius:22px;background:#fff;box-shadow:0 22px 75px #12274d40;text-align:center;animation:wm-result-pop .25s ease both}
.wm-confirm-symbol{width:58px;height:58px;margin:0 auto 14px;border-radius:17px;background:#eaf0ff;display:grid;place-items:center}
.wm-confirm-symbol svg{width:30px;height:30px;stroke:#5276e5;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wm-confirm-modal h2{margin:0;color:#263d69;font:900 23px/1.2 Nunito,system-ui,sans-serif}
.wm-confirm-modal p{margin:11px 0 23px;font-size:14px;line-height:1.55;color:#71809b}
.wm-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wm-confirm-actions button{min-height:43px;border-radius:11px;font-size:13px;font-weight:900;cursor:pointer}
.wm-confirm-cancel{border:1px solid #dce5f4;background:#f5f8fe;color:#496083}
.wm-confirm-cancel:hover{background:#eaf0fb}
.wm-confirm-accept{border:1px solid #5276e5;background:#5276e5;color:#fff}
.wm-confirm-accept:hover{background:#4168d5}

@media(max-width:760px){
  .wm-menu-panel{gap:9px}
  .wm-menu-units{grid-template-columns:1fr;gap:7px}
  .wm-unit-tile{min-height:43px;padding:7px 10px}
  .wm-unit-tile span{font-size:13px}
  .wm-list:first-child .wm-word{margin-left:0}
  .wm-list:last-child .wm-word{margin-right:0}
  .wm-word-text{padding-inline:2px}
  .wm-board{padding:8px}
  .wm-board-body{gap:22px}
  .wm-word{width:96%;padding:4px 6px;max-height:50px;align-self:end}
  .wm-word .wm-port{width:8px;height:8px;border-width:1.5px}
}
@media(max-width:520px){
  .wm-main{padding:8px 6px}
  .wm-menu-screen{gap:7px}
  .wm-menu-panel{border-radius:16px;padding:11px;gap:8px}
  .wm-menu-main-selects{grid-template-columns:minmax(0,.65fr) minmax(0,1.4fr) minmax(0,.95fr);gap:6px}
  .wm-select-wrap>span{font-size:9px}
  .wm-select-wrap select{height:39px;padding:0 25px 0 8px;font-size:12px}
  .wm-select-wrap svg{bottom:11px;right:8px;width:15px;height:15px}
  .wm-menu-unit-header h2{font-size:14px}
  .wm-menu-bottom{grid-template-columns:1fr;gap:10px;padding-top:9px}
  .wm-start{width:100%;height:41px}
  .wm-workspace{padding:8px 7px 10px;border-radius:15px}
  .wm-round-icon{display:none}
  .wm-round-heading{gap:4px}
  .wm-round-heading h2{font-size:14px}
  .wm-score{padding:6px 8px;gap:4px;font-size:10px}
  .wm-score strong{font-size:12px}
  .wm-progress{height:5px}
  .wm-hint{margin:7px 0;font-size:10px}
  .wm-board{border-radius:10px;padding:7px 5px}
  .wm-board-body{gap:16px}
  .wm-flag{width:22px;height:18px;font-size:8px}
  .wm-word{border-radius:8px;padding:2px 4px;font-size:clamp(12px,1.9vh,14px);gap:3px;max-height:48px;align-self:end}
  .wm-port{width:7px;height:7px}
  .wm-bottom-bar{padding-top:8px}
  .wm-primary{min-width:124px;height:38px}
  .games-header .games-header-name{font-size:clamp(12px,3.15vw,17px)}
  .wm-designer{display:none}
}
@media(max-height:650px){
  .wm-main{padding-block:7px}
  .wm-game-head{gap:7px}
  .wm-hint{margin:6px 0}
  .wm-board{padding-block:6px}
  .wm-list{gap:3px}
  .wm-word{padding-block:2px}
  .wm-bottom-bar{padding-top:7px}
  .wm-menu-panel{gap:7px}
  .wm-unit-tile{min-height:40px}
}
@media(max-height:470px){
  .wm-round-heading h2{display:none}
  .wm-hint{margin:3px 0;min-height:13px}
  .wm-progress{height:4px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Pointer-driven tag matching: click-to-select remains available. */
.wm-word{touch-action:none;user-select:none;-webkit-user-select:none}
.wm-word.is-drag-source{opacity:.48}
.wm-word.is-drop-target{outline:3px solid #80a6f6;outline-offset:2px}
.wm-drag-ghost{position:fixed;z-index:9999;pointer-events:none;margin:0!important;opacity:.94;transform:translate(-50%,-50%) rotate(-3deg);box-shadow:0 12px 26px #20396738;max-width:250px;width:max-content;min-width:100px;height:auto;min-height:42px;padding:8px 12px;white-space:normal}
@media(max-width:520px){.wm-drag-ghost{max-width:42vw;font-size:13px;min-height:38px}}

/* End-of-set results */
.wm-result-backdrop[hidden]{display:none!important}
.wm-result-backdrop{position:fixed;inset:0;z-index:1100;background:#162746a8;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;animation:wm-result-fade .2s ease both}
.wm-result-modal{position:relative;width:min(100%,430px);padding:32px 26px 25px;border:1px solid #e1eafa;border-radius:24px;background:linear-gradient(165deg,#fff 55%,#f3f7ff);box-shadow:0 22px 75px #12274d40;text-align:center;color:#314669;animation:wm-result-pop .28s cubic-bezier(.2,.9,.2,1.1) both}
.wm-result-close{position:absolute;top:13px;right:15px;display:grid;place-items:center;border:0;background:#edf2fb;color:#7080a1;width:31px;height:31px;border-radius:50%;font-size:23px;line-height:1;cursor:pointer}
.wm-result-close:hover{background:#dfe9fb}
.wm-result-icon{width:78px;height:78px;margin:0 auto 11px;border-radius:50%;background:#fff6db;display:grid;place-items:center}
.wm-result-icon svg{width:58px;height:58px}
.wm-result-modal h2{margin:0;font:900 25px/1.2 Nunito,system-ui,sans-serif;color:#263d69}
.wm-result-subtitle{margin:7px 0 23px;font-size:13px;color:#8593ab}
.wm-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.wm-result-stat{min-width:0;display:flex;align-items:center;flex-direction:column;gap:6px;padding:15px 5px;border:1px solid #e5ebf7;border-radius:15px;background:#fff}
.wm-result-stat-icon{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;font-size:18px;font-weight:900}
.wm-result-stat-icon.correct{color:#238d6a;background:#e2f8eb}
.wm-result-stat-icon.wrong{color:#cd6864;background:#ffebea}
.wm-result-stat-icon.time{color:#4c70c7;background:#eaf0ff}
.wm-result-stat strong{font:900 clamp(20px,3vw,26px)/1 Nunito,system-ui,sans-serif;color:#30476e;font-variant-numeric:tabular-nums}
.wm-result-stat>span:last-child{font:700 11px/1.2 Nunito,system-ui,sans-serif;color:#8a96ab}
.wm-result-detail{margin:19px 0;color:#7d8ba4;font-size:12px;line-height:1.5}
.wm-result-continue{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:46px;margin:0 auto}
.wm-result-continue svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes wm-result-fade{from{opacity:0}to{opacity:1}}
@keyframes wm-result-pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){
  /* Keep the existing inward-facing tag alignment on smaller screens. */
  .wm-list:first-child .wm-word{justify-self:end}
  .wm-list:last-child .wm-word{justify-self:start}
}
@media(max-width:420px){.wm-result-modal{padding:27px 16px 20px;border-radius:18px}.wm-result-stats{gap:6px}.wm-result-stat{padding:13px 3px}.wm-result-stat>span:last-child{font-size:10px}}

/* 2026-11: soft visual refresh and vector-shaped classroom word tags. */
body{
  background:
    radial-gradient(ellipse 60% 36% at 6% 4%,#e2f3f4 0%,transparent 77%),
    radial-gradient(ellipse 50% 38% at 95% 93%,#fcece0 0%,transparent 80%),
    #f5f8ff;
}
.wm-menu-panel,.wm-workspace{
  border-color:#dce7f1;
  background:linear-gradient(155deg,#fff 66%,#fbfcff);
  box-shadow:0 12px 34px #344f8917,0 2px 6px #314d8908;
}
.wm-menu-panel::before{background:radial-gradient(circle,#dff5ecbb,transparent 73%)}
.wm-menu-panel::after{content:"";position:absolute;width:190px;height:190px;left:-110px;bottom:-100px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fae8d5a6,transparent 73%)}
.wm-select-wrap select{background:#f6f9ff;border-color:#d8e4f3}
.wm-select-wrap select:focus{background:#fff}
.wm-unit-tile{background:linear-gradient(105deg,#fff,#f9fcff);border-color:#dae6f0;box-shadow:0 3px 0 #e6eef5}
.wm-unit-tile:nth-child(3n + 2){background:linear-gradient(105deg,#fff,#f8fcfa)}
.wm-unit-tile:nth-child(3n){background:linear-gradient(105deg,#fff,#fffbf6)}
.wm-unit-tile.is-current{background:#eaf3ff;border-color:#7ba3ed;box-shadow:inset 0 0 0 1px #7ba3ed,0 3px 0 #d2e1fc}
.wm-board{
  border-color:#dce8f0;
  background:
    radial-gradient(circle at 1px 1px,#abc7df31 1px,transparent 1.5px) 0 0/23px 23px,
    linear-gradient(120deg,#f6fbfe,#f9fbff 50%,#fdfaf6);
}
.wm-round-icon{background:#e6f5f1}
.wm-round-icon svg{stroke:#388b82}
.wm-score{background:#f0faf4;border-color:#d9efe5}
.wm-progress{background:#e6edf5}
.wm-hint-icon{color:#4fa596}
/* The eyelet and folded corner are real SVG artwork, separate from the connection ports. */
.wm-word{
  isolation:isolate;
  border-color:#cddfed;
  color:#304869;
  background:linear-gradient(120deg,#ffffff,#f1f7fc);
  box-shadow:0 3px 0 #e2ebf3,0 5px 12px #2b56800a;
  padding-inline:clamp(10px,1.6vw,19px);
}
.wm-list:last-child .wm-word{
  border-color:#e6d9ce;
  background:linear-gradient(240deg,#ffffff,#fef6ee);
  box-shadow:0 3px 0 #f0e5dc,0 5px 12px #8560340a;
}
.wm-word::after{
  content:"";position:absolute;inset-block:8px;width:3px;border-radius:4px;
  background:linear-gradient(#8cbec6,#9caaf3);opacity:.65;pointer-events:none;
}
.wm-list:first-child .wm-word::after{left:4px}
.wm-list:last-child .wm-word::after{right:4px;background:linear-gradient(#e5b98e,#dbabbe)}
.wm-tag-art{position:absolute;z-index:-1;top:0;left:0;width:34px;height:100%;pointer-events:none;color:#b1d6df;opacity:.63}
.wm-tag-art-shape{fill:#dceff3;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.wm-tag-art-eyelet{fill:#fff;stroke:#8cbbc6;stroke-width:2}
.wm-list:last-child .wm-tag-art{left:auto;right:0;transform:scaleX(-1);color:#e6cdb5}
.wm-list:last-child .wm-tag-art-shape{fill:#f9e9d8}
.wm-list:last-child .wm-tag-art-eyelet{stroke:#d7b89a}
.wm-word-text{position:relative;z-index:1;padding-inline:clamp(10px,1.2vw,16px)}
.wm-port{border-color:#98bcc9;background:#fff}
.wm-list:last-child .wm-port{border-color:#d8b9a0}
.wm-word:hover:not(:disabled){background:#edf8fd;border-color:#88c3d6;box-shadow:0 4px 0 #d6e9f2,0 5px 15px #3c80991b}
.wm-list:last-child .wm-word:hover:not(:disabled){background:#fff3e7;border-color:#dbb99c;box-shadow:0 4px 0 #efded0,0 5px 15px #ad8a6815}
.wm-word.is-selected,.wm-list:last-child .wm-word.is-selected,
.wm-word.is-error,.wm-list:last-child .wm-word.is-error,
.wm-word.is-matched,.wm-list:last-child .wm-word.is-matched{
  background:var(--wm-soft);color:var(--wm-dark);border-color:var(--wm-accent);
  box-shadow:0 2px 0 var(--wm-rim);
}
.wm-word.is-selected .wm-tag-art,.wm-word.is-matched .wm-tag-art{opacity:.32}
.wm-word.is-drop-target{outline-color:#5cb5bb}
/* The legend heading is redundant on phones: selectors and units remain visible. */
@media(max-width:760px){
  .wm-menu-unit-header{display:none}
  .wm-word{padding-inline:7px}
  .wm-word-text{padding-inline:4px}
  .wm-tag-art{width:24px;opacity:.45}
}
@media(max-width:520px){
  .wm-word{padding-inline:5px}
  .wm-word-text{padding-inline:3px}
  .wm-tag-art{width:18px}
  .wm-word::after{width:2px;inset-block:6px}
}

/* Word Match: clearer tag states and edge-to-edge mobile play area. */
.wm-word:not(.is-selected):not(.is-error):not(.is-matched){
  border-color:#9eb8cb;
}
.wm-list:last-child .wm-word:not(.is-selected):not(.is-error):not(.is-matched){
  border-color:#c6ab94;
}
.wm-word.is-selected,.wm-list:last-child .wm-word.is-selected{
  /* Thicker-looking outline without shifting the tag or neighboring elements. */
  box-shadow:inset 0 0 0 1.5px var(--wm-accent),0 2px 0 var(--wm-rim);
}
@media(max-width:760px){
  /* Native accessible labels stay on the selects via aria-label. */
  .wm-menu-main-selects .wm-select-wrap>span{display:none}
  .wm-game-screen{max-width:none;width:100%}
  .wm-main:has(.wm-game-screen:not([hidden])){
    max-width:none;
    width:100%;
    padding:2px;
  }
  .wm-game-screen .wm-workspace{border-radius:12px;padding:6px 4px;min-height:0}
  .wm-game-screen .wm-round-heading h2{display:none}
}

/* Keep all menu units visible on compact screens by sharing the available height. */
@media (max-width:760px){
  .wm-menu-units{
    grid-auto-rows:minmax(0,1fr);
    align-content:stretch;
    gap:clamp(2px,.65vh,7px);
    overflow-y:hidden;
    padding-block:2px;
  }
  .wm-unit-tile{
    min-height:0;
    padding-block:clamp(2px,.6vh,7px);
  }
  .wm-menu-bottom{justify-content:center;}
  .wm-start{width:min(100%,320px);max-width:320px;margin-inline:auto;}
}
@media(max-width:760px) and (max-height:650px){
  .wm-menu-panel{gap:5px;padding-block:8px;}
  .wm-menu-bottom{padding-top:5px;}
  .wm-start{height:38px;}
  .wm-unit-tile{gap:7px;padding-inline:8px;}
  .wm-unit-tile strong,.wm-unit-tile span{font-size:clamp(11px,1.7vh,13px);line-height:1.15;}
}

.wm-menu-main-selects{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr)}
.wm-timer{margin-left:auto;flex:none;font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;color:#26645e;background:#e5f5ee;padding:8px 12px;border:1px solid #b4dbcb;border-radius:10px}.wm-timer.is-low{color:#a33047;background:#fff0f2;border-color:#edb1be}
.wm-hint-button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #cbbb78;background:#fff7d9;color:#75591f;padding:11px 16px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}.wm-hint-button:hover:not(:disabled){background:#ffefb3}.wm-hint-button:disabled{opacity:.45;cursor:not-allowed}
.wm-word.is-hint{outline:3px solid #d89d20;outline-offset:3px;box-shadow:0 0 0 7px #f9d76044!important;filter:brightness(1.04)}
@media(max-width:900px){.wm-menu-main-selects{grid-template-columns:repeat(2,minmax(0,1fr))}.wm-timer{font-size:16px;padding:6px 9px}.wm-hint-button{padding:9px 11px;font-size:13px}}
@media(max-width:500px){.wm-game-head{flex-wrap:wrap}.wm-round-heading{flex:1}.wm-bottom-bar{flex-wrap:wrap;gap:10px}.wm-bottom-bar .wm-progress{flex-basis:100%}.wm-bottom-bar .wm-hint-button{margin-left:auto}}

.wm-menu-main-selects .wm-select-wrap:first-child{min-width:min(180px,100%)}
.wm-menu-main-selects #gradeSelect option{font-size:14px;padding:3px 8px}