body{font-family:system-ui,-apple-system,Arial,sans-serif;background:#0f1a2e;color:#fff;margin:0;padding:16px}
header{max-width:760px;margin:0 auto}
main{max-width:760px;margin:0 auto}
h1{margin:8px 0 0}
.sub{color:#cbd5e1;margin:4px 0}
.demo-note{background:#fef3c7;color:#422006;padding:10px;border-radius:8px}
.card{background:#1e293b;border-radius:12px;padding:16px;margin:16px 0}
.hidden{display:none}
button{background:#16a34a;color:#fff;border:0;border-radius:8px;padding:10px 14px;font-size:16px;margin:4px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{background:#475569;cursor:not-allowed}
input,textarea{padding:12px;font-size:17px;line-height:1.3;border-radius:8px;border:1px solid #64748b;width:100%;max-width:100%;box-sizing:border-box;min-height:52px;background:#fff;color:#111;touch-action:manipulation;-webkit-user-select:text;user-select:text;pointer-events:auto;position:relative;z-index:1}
label{display:block;margin:8px 0 6px;color:#e2e8f0;font-size:16px}
#name-screen input,#home-screen input{width:100%}
#name-screen button,#home-screen button{min-height:52px}
.msg{color:#fde68a;min-height:20px}
.hint{color:#cbd5e1}
.scores{display:flex;gap:16px;margin:12px 0}
.scores>div{background:#0f172a;padding:10px;border-radius:8px;flex:1}
.board-box{background:#e7d7b8;color:#1e293b;padding:12px;border-radius:10px}
.board{display:flex;flex-wrap:wrap;gap:6px}
.hand{display:flex;flex-wrap:wrap;gap:8px}
/* Real domino tiles: cream, clear middle divider, pip dots. */
/* Normal hand tiles stand tall; doubles lie sideways. */
.domino{background:#fff8e7;color:#111;border:2px solid #92400e;border-radius:8px;padding:3px;display:flex;cursor:pointer;box-sizing:border-box;font:inherit}
.domino .half{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;min-width:0;min-height:0}
.domino .pip-cell{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.domino .pip-cell.pip::after{content:"";display:block;background:#111;border-radius:50%}
.hand-domino{flex-direction:column;width:64px;height:118px;flex:none}
.hand-domino .half + .half{border-top:2px solid #92400e}
.hand-domino.double{flex-direction:row;width:118px;height:64px}
.hand-domino.double .half + .half{border-top:0;border-left:2px solid #92400e}
.hand-domino .pip-cell.pip::after{width:11px;height:11px}
.hand-domino.playable{border-color:#16a34a;box-shadow:0 0 0 2px #16a34a}
.hand-domino.unplayable{background:#64748b;border-color:#334155;cursor:not-allowed;opacity:.75}
.hand-domino.unplayable .pip-cell.pip::after{background:#cbd5e1}
/* Board tiles are smaller than hand tiles. Normal board tiles lie */
/* flat; doubles stand crosswise. The divider stays clear even for */
/* a double blank, which has no pips on either half. */
.board-domino{flex-direction:row;width:62px;height:34px;padding:2px;cursor:default}
.board-domino .half + .half{border-left:2px solid #92400e}
.board-domino.double{flex-direction:column;width:34px;height:62px}
.board-domino.double .half + .half{border-left:0;border-top:2px solid #92400e}
.board-domino .pip-cell.pip::after{width:6px;height:6px}
.board-domino.last{outline:3px solid #16a34a}
.tile{background:#fff8e7;color:#111;border:2px solid #92400e;border-radius:8px;padding:10px 8px;font-size:20px;font-weight:700;cursor:pointer;min-width:58px;text-align:center}
.join-row{margin-top:12px}
li{margin:6px 0}
li button{background:#2563eb}
.my-game-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.my-game-row button.remove-game{background:#475569;min-height:44px;font-size:15px}